背景：在前后端分离开发的项目中，一般会有开发环境、测试环境、预上线环境和生产环境。
1.在开发环境下调试接口的时候，一般都会有好几个接口地址，需要根据情况手动来切换接口地址；
2.打包时要部署项目到不同的环境，而这也需要每次都根据情况切换接口地址。
虽然，手动切换地址可以满足需求，但是这种方式不是一种较为便捷的处理方式。我们可以选择一种较为方便的方式来解决这个问题。可以通过修改配置文件，让启动和打包项目时，根据不同的命令，打到预期的效果。
/qq_7569/article/details/82492819
下面，以Vue项目为例，介绍一下解决办法：
一、在启动项目时，需要修改/package.json、/config/dev.env.js和/src/main.js文件
（1）在/package.json中，为启动命令设置不同的参数
"scripts": {"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js","dev_test": "webpack-dev-server --inline --progress --env=test --config build/webpack.dev.conf.js","dev_prod": "webpack-dev-server --inline --progress --env=prod --config build/webpack.dev.conf.js","start": "npm run dev","e2e": "node test/e2e/runner.js","test": "npm run unit && npm run e2e","lint": "eslint --ext .js,.vue src test/unit test/e2e/specs","build": "node build/build.js"}
（2）在/config/prod.env.js中，通过process.arg获取一个命令数组，并为其配置相应的命令
'use strict'const merge = require('webpack-merge')const prodEnv = require('./prod.env')let params = process.argv[4]let baseUrl = ''switch(params){case '--env=test':baseUrl = '""'breakcase '--env=prod':baseUrl= '""'breakdefault:baseUrl = '""'}module.exports = merge(prodEnv,{NODE_ENV:'"development"'baseUrl:baseUrl})
（3）在/src/main.js中，通过process.env.baseUrl获取/config/dev.env.js文件的baseUrl并将其挂载在Vue的原型上
import Vue from 'vue'import App from './App'import router from './router'Vue.config.productionTip = falseVue.prototype.$baseUrl = process.env.baseUrl/*eslint-disable no-new*/new Vue({el:'#app',router,components:{App},template:'<App/>'})
在不同接口地址下启动项目的时候，直接用对应的命令npm run dev、npm run dev_test、npm run dev_prod就可以了，再也不用去文件中修改接口地址了。
二、打包项目时，需要修改/config/prod.env.js和/src/main.js文件
（1）在/config/prod.env.js中，通过process.argv获取一个命令数组，并为其配置相应的接口地址
'use strict'var buildType = process.arge.slice(2)[0]var obj = {NODE_ENV:'"production"'}switch(buildType){case 'prod'://生产process.env.srconfig = 'prod'obj.srconfig = '"prod"'break;case 'prod_ip'://生产process.env.srconfig = 'prod_ip'obj.srconfig = '"prod_ip"'break;case 'dev'://开发process.env.srconfig = 'dev'obj.srconfig = '"dev"'break;case 'uat'://测试process.env.srconfig = 'uat'obj.srconfig = '"uat"'break;case 'pre'://预上线process.env.srconfig = 'pre'obj.srconfig = '"pre"'break;case 'beta'://外网测试process.env.srconfig = 'beta'obj.srconfig = '"beta"'case 'pre'://预上线process.env.srconfig = 'pre'obj.srconfig = '"pre"'break;default://默认开发process.env.srconfig = ''obj.srconfig = '""'break;}module.exports = obj
(2)在/src/main.js中，通过process.env.baseUrl获取/config/prod.env.js文件的baseUrl并将其挂载在Vue的原型上
import Vue from 'vue'import App from './App'import router from './router'Vue.config.productionTip = falseVue.prototype.$baseUrl = process.env.baseUrl/*eslint-disable no-new*/new Vue({el: '#app',router,components:{App},template:'<App>'})
或者，在interface.js中配置API相关接口地址：
/*eslint-disable*///API接口地址var baseURL,appId,environment,tpbbLink;var protocol; //判断是http or httpsif(window.location.href.indexOf('https')>-1){protocol = 'https://'}else{protocol = 'http://'}switch(process.env.srconfig){case 'dev'://开发baseURL = protocol + '';environment = 'test';appId = 'wx2d';signKey = 'ZYT_Tpp';case 'pre'://预上线baseURL = protocol + '';environment = 'test';appId = 'wx2d';signKey = 'ZYT_Tpp';case 'prod'://生产urlbaseURL = protocol + '';environment = 'test';appId = 'wx2d';signKey = 'ZYT_Tpp'; default://默认开发baseURL = protocol + '';environment = 'test';appId = 'wx2d';signKey = 'ZYT_Tpp'; }module.exports = {baseURL:baseURL,appId: appId,environment: environment,signKey: signKey,staticURL: staticURL,}
这样，在打包不同环境下项目的时候，直接用对应的命令npm run build、npm run build test、npm run build prod就可以了，再也不用去文件中修改接口地址了。
这样，在启动和打包项目的时候，一条命令直接搞定。
参考博客：配置webpack中dev.env.js、prod.env.js，解决不同命令下项目启动和打包到指定的环境/qq_7569/article/details/82492819
如果觉得《【vue】配置webpack中dev.env.js prod.env.js 解决不同命令下项目启动和打包到指定的环境》对你有帮助，请点赞、收藏，并留下你的观点哦！
