vue中配置webpack不同环境下的域名及参数

探索过程

vue中配置webpack不同环境下的域名及参数

假设一个项目 需要有开发环境(dev), 测试环境(test), 正式环境(prod), 并且三种环境都要build打包的需要;
前提是已通过vue-cli初始化了项目;

1.先在page.json中配置脚本命令

// 开发环境启动
"serve:dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
//测试环境启动
"serve:test": "webpack-dev-server --inline --progress --config build/webpack.test.conf.js",
// 生产环境启动 待定
// "serve:prod": "webpack-dev-server --inline --progress --config build/webpack.test.prod.js",
//开发环境打包
"build:dev": "NODE_ENV=development env_config=dev node build/build.js",
//测试环境打包
"build:test": "NODE_ENV=test env_config=test node build/build.js",
//生产环境打包
"build:prod": "NODE_ENV=production env_config=prod node build/build.js",

注意: npm脚本的参数,如 NODE_ENV 和 env_config 都可在全局变量process.env中取到

2. 添加文件及修改代码

1.在build目录下新增 webpack.test.conf.js 文件, 在config文件下新增test.env.js
2.复制 build/webpack.dev.conf.js 内容到 webpack.test.conf.js, 复制config/dev.env.js内容到test.env.js
3. 修改 webpack.test.conf.js文件

    new webpack.DefinePlugin({
      'process.env': require('../config/test.env')
    }),

4.config/dev.env.js文件内容为

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',
 API_ROOT: 'https://devapi.xxx.com',
 OTHER_DATA: '123'
})

5.config/test.env.js文件内容为

 'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports =  {
  NODE_ENV: '"development"',
  API_ROOT: 'https://testapi.xxx.com',
  OTHER_DATA: '456'
}

3.执行验证

此时执行启动命令 如 npm run serve:test
通过执行 build/webpack.test.conf.js文件 并设置 'process.env': require('../config/test.env')
这样跑起来的项目 就可通过process.env拿到不同域名地址和参数
可在src/api/base.js 中(我做的项目是这么搞得)

const appBase = {
api: process.env.API_ROOT,
other: process.env.OTHER_DATA
}

4.接下来说打包

修改 build/webpack.prod.conf.js文件

// 14行:  
const env = require('../config/prod.env')
// 修改改为  
const env = require('../config/' + process.env.env_config + '.env');

注: 其中的 process.env.env_config 已通过npm命令传递
NODE_ENV=test env_config=test node build/build.js

直接执行打包命令验证即可

npm传参问题

上文的npm传参 如 NODE_ENV=test 在window和mac linux系统中会有设置失败的问题
为了兼容 可以用 cross-env (跨环境设置环境变量及npm参数)

//启动运行 并配置启动命令
 "dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.dev.js",
 // 打包方式1执行打包文件
 "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.prod.js"
  // 打包方式2 
  "builddev": "cross-env NODE_ENV=development env_config=dev node build/build.js",
   "build": "cross-env NODE_ENV=production env_config=prod node build/build.js",

###扩展 既然build时可以传参数 那么启动项目时为何不传参呢??

1. 改变npm脚本

"serve:dev": "NODE_ENV=development env_config=dev webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"serve:test": "NODE_ENV=test env_config=test webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
// 经验证这个正式环境不能这样搞
// "serve:prod": "NODE_ENV=production env_config=prod webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

2. 删除多余的webpack.test.conf.js文件; 修改webpack.dev.conf.js文件

 new webpack.DefinePlugin({
    //require('../config/dev.env')
    'process.env': require('../config/' + process.env.env_config + '.env') 
  }),

---

最终结果

经过上述发现最优配置为:
安转cross-env
在命令中指定 env_config
配置不同的全局变量即可

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

webpack.dev.config.js 48行

  new webpack.DefinePlugin({
      'process.env': require('../config/' + process.env.env_config + '.env')
    }),

webpack.prod.config.js 15行

const env = require('../config/' + process.env.env_config + '.env');

config/dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',
 API_ROOT: '"https://devapi.xxx.com"',
 OTHER_DATA: '"123"'
})

config/prod.env.js

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  API_ROOT: '"https://prodapi.xxx.com"',
  OTHER_DATA: '"789"'
}

config/test.env.js

'use strict'
// const merge = require('webpack-merge')
// const prodEnv = require('./prod.env')
module.exports =  {
  NODE_ENV: '"development"',
  API_ROOT: '"https://testapi.xxx.com"',
  OTHER_DATA: '"456"'
}