vue项目配置环境变量

需求： 前后端分离的项目中，前端会有很多环境：本地开发，测试环境，预发布环境，正式上线环境等等，我们的项目有3套基本相同的项目，意思是有12个以上环境，当每个环境都需要打包的时候，手动修改配置就很繁琐而且难免出错，比如每个环境对应的服务器地址不同，项目名称不同。
解决： 在根目录下创建.env.xxx文件，例如.env.development,.env.production,.env.staging,.env.51(51是我的服务器标识)等等

里面配置你需要切换的服务器连接地址，其他项目名称，以及打包后的文件地址。

最后在package.json配置打包命令即可：

这样，执行哪个命令就是将对应配置的项目打包。其中，vue-cli-service build --mode xx 是修改了环境变量，即process.env里的环境变量VUE_APP_baseUrl等，其中&&是将两个命令连接起来，前面一个正确执行后执行后面的命令，可以用&&连接多个命令。
同时要注意配置outputDir，即打包后的文件的位置。默认是dist，可以自己配置，这样一键打包多个项目位于不同的目标文件夹下。
outputDir位于vue.config.js里：
运行效果：


这样就会成功打出两个不同配置的包。
如果对各位有用，希望能点个赞！