问题:在开发阶段有时候需要build打包上传到uat测试环境进行测试,当某些功能已经测试完成需要发布到正式环境时,通常需要更改一些配置,比如baseURL,如果每次都手动更改会比较麻烦,因为我们可以通过以下配置来区分。
分析:在开发阶段,process.env.NODE_ENV是development,而打包build后,process.env.NODE_ENV是production,因此无法通过process.env.NODE_ENV来区分测试环境和生产环境,这时我们就需要增加变量(VUE_APP_CURRENTMODE)来区分。这就需要两个配置文件,在项目根目录下新建.env.test和.env.production两个文件。
在这里插入图片描述
.env.test文件配置
在这里插入图片描述
.env.production文件配置
在这里插入图片描述
其中VUE_APP_CURRENTMODE是用于区分测试环境还是生产环境的变量,outputDir是打包后的输出目录
注意:需要在顶级配置文件vue.config.js(在项目根目录下新建)中配置输出目录
在这里插入图片描述
配置完以上信息后,我们需要在package.json中配置脚本(scripts),用于打包执行的命令。dfs在这里插入图片描述
注释
"build": "vue-cli-service build --no-clean --mode production"
①运行yarn build/npm run build 可以生成dist目录,该目录下的文件即可运行到生产环境中。–mode production:其中production是.env.production文件的后缀名(亲测不是VUE_APP_CURRENTMODE的配置),如果你写的是.env.build,那么就应该使用–mode build。在这里插入图片描述
②–no-clean:当build时,目标目录(dist)会在构建之前被清除然后再重建,加上–no-clean可以阻止这一默认行为
"test":"vue-cli-service build --mode test"
①运行yarn test/npm run test可以生成test目录,该目录下的文件即可运行到测试环境中
在这里插入图片描述

**以上是@vue/cli打包build文件 区分测试环境和生产环境的配置,那么接下来讲一下如何使用:**
通常我们会针对不同的环境配置不同的baseURL,这就可以根据我们以上定义的变量来配置对应的baseURL了

在这里插入图片描述
通过以上配置,不同环境执行对应的打包命令,找到对应的打包文件即可将测试环境和正式环境区分开了。
—————————————————————————————————————————————
2021.03.08更新

1.process.env 是 Node.js 中的一个环境对象。其中保存着系统环境的变量信息,而 NODE_ENV 就是其中的一个环境变量。
2.默认情况下,一个Vue CLI项目有三个模式:
	①development 模式用于vue-cli-service serve
	②production 模式用于vue-cli-service build 
	③test 模式用于vue-cli-service test:unit
	注意模式不同于NODE_ENV,一个模式可以包含多个环境变量。也就是说,每个模式都会将NODE_ENV的值设置为模式的名称—比如在development模式下NODE_ENV的值会被设置为“development”
3.在 Vue 中, NODE_ENV 可以通过 .env 文件或者 .env.[mode] 文件配置
4.在package.json文件中的命令行后直接使用 --mode 参数手动指定模式
(参数为.env.[mode]中的mode),当执行命令时,就可以使用对应.env.[mode] 文件中的配置了
Logo

前往低代码交流专区

更多推荐