背景在项目部署过程中,我们需要在测试环境和生产环境使用不同的变量。vue-cli提供了vue-cli-servicebuild打包命令,但是vue-cli-servicebuild默认的环境变量值为production。然后我们通过npmrunbuild打包构建。我们想在不同的环境下使用不同的变量,但是暂时做不到。引入vue-cli生成项目时,会在package.json中设置:"scripts":{"serve":"vue-cli-serviceserve","build":"vue-cli-servicebuild"}vue-cli-serviceserve命令会启动一个开发服务器,默认指定的环境模式是development。vue-cli-servicebuild将在dist/目录中生成一个生产就绪的包,带有JS/CSS/HTML缩小和自动供应商块拆分以实现更好的缓存。环境变量和模式我们可以在项目的根目录下创建不同模式的文件:loadedinthespecifiedmode.env.[mode].local#只在指定模式下加载,但是会被git忽略一般我们会有一个本地环境和一个测试环境,在线环境,那么我们需要创建三个架构文件。...(这里的环境变量是和打包相关的,production会压缩代码等,真正和各个环境相关的变量是下面以VUE_APP开头的变量)NODE_ENV=production//以VUE_APP_开头的变量会被webpack使用。DefinePlugin静态嵌入客户端包VUE_APP_ENV='test'.env.production线上环境模式//环境变量NODE_ENV=production//VUE_APP_开头的变量会被webpack.DefinePlugin静态嵌入客户端包时VUE_APP_ENV='production'部署不同模式,构建打包执行npmrunbuild,然后会执行vue-cli-servicebuild。默认模式是production,对应.env.production文件,取的是这个文件里的环境变量。配置测试环境需要在scripts下添加脚本:"scripts":{"serve":"vue-cli-serviceserve","build":"vue-cli-servicebuild","build-test":"vue-cli-servicebuild--modetest"}测试环境打包搭建完成后,执行npmrunbuild-test。index.html使用环境变量在index.html中,可以通过<%=process.env.VUE_APP_xxx%>获取不同模式配置的环境变量。
