vue 配置多环境打包 功能

1.安装cross-env依赖在终端执行   npm install --save-dev cross-env

cross-env作为运行跨平台设置和使用环境变量的脚本，当执行build动作时通过设置、赋值环境变量告知当前构建包的是测试环境还是生产环境

npm上对cross-env的说明

2.配置package.json文件,添加如下 NODE_ENV 和env_config的值将用于build文件夹 process.env 这个对象里面;比如NODE_ENV的值可以在build文件夹下的文件可以通过 process.env.NODE_ENV 来获取到值

3. 配置build.js

 

4.配置config文件,这个里面的process.env只能从package.json获取到 即cross-env后面的键值对

创建文件 pre.env.js

'use strict'
module.exports = {
  NODE_ENV: '"pre"',
  EVN_CONFIG: '"pre"',
  API_ROOT: '"/api"',
  ASSETS_PUBLICPATH: '/precard/',
  BASE_ROUT: '"/precard"'
}

创建文件 prod.env.js

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  EVN_CONFIG: '"prod"',
  API_ROOT: '"/api"',
  ASSETS_PUBLICPATH: '/prodcard/',
  BASE_ROUT: '"/prodcard"'
}

创建文件 test.env.js

'use strict'
module.exports = {
  NODE_ENV: '"testing"',
  EVN_CONFIG: '"test"',
  API_ROOT: '"/drp/api"',
  ASSETS_PUBLICPATH: '/card/',
  BASE_ROUT: '"/card"'
}

修改文件index.js,引用文件的名称和 webpack.prod.conf.js 里面的env存在关联注意对应,修改assetsPublicPath影响打包时的本地加载路径

4.修改其他文件比如基础路由文件,以及访问后端的链接地址不同,以下中的process.env就可以取到自己配置的那个几个文件中的值(pre.env.js, test.env.js, prod.env.js)