怎么在vue-cli3中添加模式配置多环境变量?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
.env.uat配置如下:
VUE_APP_BUILD_TYPE=uat
vue-cli中规定,只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。
代码中可以通过 process.env.VUE_APP_SECRET
这样访问。
NODE_ENV 和 BASE_URL 是两个特殊变量,在代码中始终可用
Step2:修改 package.json
传递 --mode 选项参数为命令行覆写默认的模式。
"scripts": { "build": "vue-cli-service build", "build:uat": "vue-cli-service build --mode uat" }
Step3:使用
// 是否预发部署 const IS_UAT = process.env.VUE_APP_BUILD_TYPE === 'uat' const _url = IS_UAT ? 'http://a.123.com' : 'http://b.123.com' // 是否添加埋点 const IS_ADD_JAQ = process.env.NODE_ENV === 'production' && !IS_UAT if (IS_ADD_JAQ && loginUser) addJaq(loginUser) ...
优化
到这,功能已经实现了。
美滋滋地打个包,妈呀,体积也太大了:
此处解决办法为强写 NODE_ENV ,最终.env.uat配置如下:
NODE_ENV=production VUE_APP_BUILD_TYPE=uat
Vue是一套用于构建用户界面的渐进式JavaScript框架,Vue与其它大型框架的区别是,使用Vue可以自底向上逐层应用,其核心库只关注视图层,方便与第三方库和项目整合,且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。
关于怎么在vue-cli3中添加模式配置多环境变量问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注亿速云行业资讯频道了解更多相关知识。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。