vue/cli4,配置test测试环境,并通过全局控制变量管理地址

---

前言

由于公司项目较小,所以项目的管理比较随意,之前都是直接通过本地打包npm run build 打包后的文件发送给测试就测,最近对接一个单点登录,需要配置回调地址,地址的格式是本地的端口,这就造成了需要配置三个地址,我的本地(开发用),测试本地(测试用),服务器线上(正式环境)。然后每次打包给测试,发布,都需要修改地址.很麻烦,所用用上了vue/cli的env来控制

---

一、创建.env.test文件

在项目根目录创建.env.test文件

#测试环境
#判断环境标识
VUE_APP_MODE=test

#UAC跳转地址
VUE_APP_API_UAC_PATH=http://8.136.3.205:100/oauth/authorize?response_type=e&client_id=1vvmMr0lXncfe7FYgHnby


#打包资源文件出口
outputDir=test

#指定打包环境,production为生产环境,不指定pro打包资源不完整,无法部署
NODE_ENV=production

二、在packge.json中创建一个打包模式test

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test": "vue-cli-service build --mode test"
},

三、修改vue.config.js配置

publicPath: './',
productionSourceMap: false,
// 指定打包资源文件出口
outputDir: process.env.outputDir,
css: {
    loaderOptions: {
        stylus: {
            import: '~@/assets/style/common.styl',
        },
    },
},

四、运行测试环境

五、完成效果

我们可以通过打印查看变量是否不一样来判断是否设置成功

5.1测试环境

main.js打印

打印结果

5.2开发环境

main.js打印

打印结果

---

六、注意事项

.env.test 一定要指定NODE_ENV=production,不然打包文件不完整,只能在本地运行,无法部署

执行npm run test 后,打包文件夹没有css文件以及js文件不完整

加上NODE_ENV=production后打包的格式跟dist一致,可以发布可以部署.

总结

需要固定多个地址,使用全局控制变量来控制会减少很多容易出错的地方.指定test环境打包一定要指定他的打包环境为production否则打包后的文件不能发布(NODE_ENV=production)