vue分环境打包部署

安装 cross-env

npm install --save-dev cross-env

cross-env 统一了不同操作系统设置环境变量的方式.
用法：

"scripts": {
    "build": "node build/build.js",
    "build:test": "cross-env NODE_ENV=production env_config=test node build/build.js", //设置了环境变量 NODE_ENV 和 env_config
    "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js", //设置了环境变量 NODE_ENV 和 env_config
  }

开始配置 我们先修改scripts脚本

// package.json
"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "build": "node build/build.js",
  "build:test": "cross-env NODE_ENV=production env_config=test node build/build.js",
  "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
},

我们设置了两个环境变量 NODE_ENV 和 env_config然后执行正常的打包。这里的环境变量设置是方便我们在webpack配置文件中使用

新建环境变量文件

新建 在/config目录下新建test.env.js文件存放test的环境变量

//  /config/test.env.js
'use strict'
module.exports = {
    NODE_ENV: '"testing"',
    EVN_CONFIG:'"test"',
    API_ROOT:'"/test/apis/v1"'
}

修改 webpack.prod.config.js

注释掉

//const env = require('../config/prod.env')

修改成

//const env = require('../config/prod.env')
const env_config = process.env.env_config || ''; //执行不同的打包脚本对应不同的env_config值
switch (env_config){
  case 'test': 
        var env= require('../config/test.env');
        break;
  case 'prod': 
        var env= require('../config/prod.env');
        break;
  default:
      var env= require('../config/prod.env');
}
...

在代码中使用

// Home.vue
axios.get(process.env.API_ROOT) ...