怎么在vue-cli3中添加模式配置多环境变量

  介绍

怎么在vue-cli3中添加模式配置多环境变量?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

<强> .env。uat配置如下:

<代码> VUE_APP_BUILD_TYPE=uat

vue-cli中规定,只有以VUE_APP_开头的变量会被webpack。DefinePlugin静态嵌入到客户端侧的包中。

代码中可以通过<代码> process.env。VUE_APP_SECRET 这样访问。

NODE_ENV和BASE_URL是两个特殊变量,在代码中始终可用

<强>步骤2:修改包。json

传递,模式选项参数为命令行覆写默认的模式。

“scripts":, {   “build"才能:,“vue-cli-service  build"   “才能构建:uat":,“vue-cli-service  build ——mode  uat"   以前,}

<强>步骤3:使用

//,是否预发部署   const  IS_UAT =, process.env.VUE_APP_BUILD_TYPE ===, & # 39; uat # 39;   const  _url =, IS_UAT  ?, & # 39; http://a.123.com& # 39;,:, & # 39; http://b.123.com& # 39;//,是否添加埋点   const  IS_ADD_JAQ =, process.env.NODE_ENV ===, & # 39;生产,,,,,! IS_UAT   if  (IS_ADD_JAQ ,,, loginUser), addJaq (loginUser)   ,……

优化

到这,功能已经实现了。

美滋滋地打个包,妈呀,体积也太大了:

怎么在vue-cli3中添加模式配置多环境变量

此处解决办法为强写NODE_ENV,最终.env。uat配置如下:

NODE_ENV=生产   VUE_APP_BUILD_TYPE=uat

怎么在vue-cli3中添加模式配置多环境变量

vue是什么

vue是一套用于构建用户界面的渐进式JavaScript框架,vue与其它大型框架的区别是,使用vue可以自底向上逐层应用,其核心库只关注视图层,方便与第三方库和项目整合,且使用vue可以采用单文件组件和vue生态系统支持的库开发复杂的单页应用。

关于怎么在vue-cli3中添加模式配置多环境变量问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注行业资讯频道了解更多相关知识。

怎么在vue-cli3中添加模式配置多环境变量