vue: 多环境配置

一、 安装cross-env

npm install cross-env --save-dev

二、 修改package.json文件

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "dev--test": "cross-env env_config=test webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "dev--prod": "cross-env env_config=prod webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "build": "node build/build.js",
    "build--test": "cross-env env_config=test node build/build.js",
    "build--prod": "cross-env env_config=prod node build/build.js"
},

1、打测试包和生产包

• config文件夹中新建test.env.js

'use strict'
 module.exports = {
 DATA_ENVIRONMENT: '"test"',//代码中判断是什么数据环境
  API_HOST: '"http://ceshi/"'  // 自己测试服务器ip地址
}

• config文件夹中修改 prod.env.js

module.exports = {
 NODE_ENV: '"production"',
 DATA_ENVIRONMENT: '"prod"',
 API_HOST: '"http://prod/"' // 自己生产服务器ip地址
};

• 修改webpack.prod.conf.js

const env = process.env.env_config == 'test'? require('../config/test.env') : require('../config/prod.env')

• 此处env_config是通过package.json中传递的
  2、 本地访问测试和生产
• 新建devt.env.js， 带t

"use strict";
   const merge = require("webpack-merge");
   const testEnv = require("./test.env");
   module.exports = merge(testEnv, {
   API_HOST: '"/api"'
});

• 修改dev.env.js，没有t

'use strict'
  const merge = require('webpack-merge')
  const prodEnv = require('./prod.env')
  module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_HOST: '"/api"',
})

• 修改跨域ip，config文件夹中 index.js
• dev下修改 proxyTable

proxyTable: {
      "/api": {
        // 生产--环境       
        target: process.env.env_config == 'test' ? "http://tapi.asysn1.com" : "http://tapi.asysn.com", 
        changeOrigin: true, //跨域
        pathRewrite: {
          "^/api": "/"
        }
    }
},

• 本地运行

本地访问测试环境：npm run dev--test
本地访问生产环境：npm run dev--prod

• 不同环境打包

打包测试环境：npm run build--test
打包生产环境：npm run build--prod

结束！！！！！！！