vue-cli实现多环境运行打包编译
- 在开发过程中经常遇到这样的情况，开发或者打包需要去请求后台的不同环境（测试环境，预上线环境，正式环境），虽然可以去改动手动的去改变axios的请求前缀，但是难免会出现忘记更改过来的情况，造成一下不必要的时间浪费，因此，这边文章主要教大家如何配置利用命令行进行不同环境的切换运行。
- 思路：主要是利用了node的process 对象，它是一个全局变量，它提供当前 Node.js 进程的有关信息，以及控制当前 Node.js 进程。
process.argv属性返回一个数组，这个数组包含了启动Node.js进程时的命令行参数。第一个元素为process.execPath。如果需要获取argv[0]的值请参见node文档的process.argv0。第二个元素为当前执行的JavaScript文件路径。剩余的元素为其他命令行参数。那么就可以利用这个参数来对环境请求的地址前缀进行判断配置。
- 更改
package.json文件，提供运行的命令-
配置开发运行请求地址，增加下图代码
image.png
-
代码如下：
"dev_pro": "webpack-dev-server --inline --progress --env=pro --config build/webpack.dev.conf.js",
"dev_test": "webpack-dev-server --inline --progress --env=test --config build/webpack.dev.conf.js",
"dev_local": "webpack-dev-server --inline --progress --env=local --config build/webpack.dev.conf.js",
"build_pro": "node build/build.js --env=pro", // 正式环境
"build_test": "node build/build.js --env=test", // 测试环境
"build_local": "node build/build.js --env=local" // 本地环境
2.更改config文件夹中的dev-env.js和prod.env.js，判断请求前缀并赋值，BASE_API 为设置axios请求前缀，是全局变量。
- 更改dev-env.js
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
// -- 增加部分 --//
// dev环境中获取配置的--env=XXX参数
let params = process.argv[4]
let mergeObj = {
NODE_ENV: '"development"',
ENV_CONFIG: '"dev"',
}
switch (params) {
case "--env=pro":
mergeObj.BASE_API = '"https://test_pro.com"' // 正式地址前缀
break;
case "--env=test":
mergeObj.BASE_API = '"https://test_test.com"' // 测试地址前缀
break;
case "--env=local":
mergeObj.BASE_API = '"https://test_local.com"' // 本地地址前缀
break;
default:
mergeObj.BASE_API = '"https://test_default.com"' // 默认地址前缀
break;
}
// 合并到全局环境中
module.exports = merge(prodEnv, mergeObj)
// -- 增加部分 --//
- 更改prod.env.js文件
'use strict'
// -- 增加部分 --//
// dev环境中获取配置的--env=XXX参数
let params = process.argv[2]
let mergeObj = {
NODE_ENV: '"production"',
ENV_CONFIG: '"prod"',
}
switch (params) {
case "--env=pro":
mergeObj.BASE_API = '"https://test_pro.com"' // 正式地址前缀
break;
case "--env=test":
mergeObj.BASE_API = '"https://test_test.com"' // 测试地址前缀
break;
case "--env=local":
mergeObj.BASE_API = '"https://test_local.com"' // 本地地址前缀
break;
default:
mergeObj.BASE_API = '"https://test_default.com"' // 默认地址前缀
break;
}
// 合并到全局环境中
module.exports = mergeObj
// -- 增加部分 --//
- 更改完成之后，就可以执行命令行切换不同请求前缀了
// 开发
npm run dev // 默认
npm run dev_pro // 默认正式
npm run dev_test // 默认测试
npm run dev_local // 默认本地
// 编译
npm run build // 默认
npm run build_pro // 默认正式
npm run build_test // 默认测试
npm run build_local // 默认本地
-
也可以利用idea,直接运行。
image.png
