今天就跟大家聊聊有关“vue项目多环境配置的原因是什么，怎么样做”的内容，可能很多人都不太了解，为了让大家认识和更进一步的了解，小编给大家总结了以下内容，希望这篇“vue项目多环境配置的原因是什么，怎么样做”文章能对大家有帮助。

没接触多环境配置前，感觉好高大上，真正操作后感觉也就那么回事，在此把自己遇到的问题和解决方案叙述一下，有不对的地方欢迎各位大佬指出。

什么是多环境配置,为什么要多环境配置?

最常见的多环境配置，就是开发环境配置,和生产环境配置(也就是上线的配置)，很多情况下我们开发环境下的域名，和一些配置项,和我们生产模式下的不同，这个时候就需要我们进行多环境配置，不然每次发版都要改一波数据多麻烦。另一种情况就是你两个项目是用的一套代码，但是最后又要分别打成不同的包，那么这个时候多环境配置就大大提升了开发效率。

.env 文件配置到哪里

.env文件配置在你项目的根目录里面和package.json同级如下图。

.env文件如何配置，配置多少个？

.env文件如何命名？
最开始我在网上查的时候好多博主说名字必须命名成
.env.development 开发环境下的配置文件
.env.production 生产环境下的配置文件
其实不是的，如果你配置的是开发环境和生产环境那么这样命名，无可厚非，但是你如果是多项目公用代码，这样命名就有点驴头不对马嘴。所以这块的命名格式只需要文件开头为.env即可，后面的名字你想怎样都可以。

.env文件的配置

这块就是你想用什么东西就配置什么东西，打个比方我想在项目全局拿到一个名字，那你就直接.env里面配置就ok了，下面我会详细叙述如何取值。

npm run serve 或者npm run build 的时候，会默认走.env的配置

图示：

//这块只需要 VUE_APP_*** 以这样的形式命名就ok了，后面大写还是小写这块看你心情都可以。
VUE_APP_NAME = '娄渊洋'
VUE_APP_HTTPS = 'http://www.louhc.com/'
VUE_APP_ABBREVIATION = 'louhc'
VUE_APP_LOGO = 'louhc'

默认的.env文件配置好后，我们接着配置有特殊需求的.env文件，比如我想让在另一种环境下使用 其他的名字。例如 .env.bsy文件 .bsy是我随便写的名字这块可以自定义。

//这块只需要 VUE_APP_*** 以这样的形式命名就ok了，后面大写还是小写这块看你心情都可以。
VUE_APP_NAME = '白衫云'
VUE_APP_HTTPS = 'http://www.louhc.com:82/'
VUE_APP_ABBREVIATION = 'bsy'
VUE_APP_LOGO = 'bsy'

依次类推你想配置多少个都可以
.env文件配好后我们就该配置运行环境了

如何配置运行环境

找到package.json文件，如下图

build: 和 serve: 后面跟的名字就是你随便起的名字一定要对应上，这在运行的时候才能找到相应的配置项。

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

再次多说一点：.env是默认配置项，当运行环境配置项的时候，会将默认配置项和运行的环境配置项融合，在参数相同的情况下，会以环境配置项为主，简单来说就是，默认配置项存在，环境配置项也存在，这个时候运行哪个环境配置项，就以哪个环境配置项的值为准，如果默认配置项存在，环境配置项不存在，那么运行环境配置项的时候同样也可以拿到默认配置项的值。

如何获取全局配置项的值

例子：如何我想在js中拿到 VUE_APP_NAME = ‘娄渊洋'，那么这直接在你想赋值的地方写上这行代码即可 process.env.VUE_APP_NAME

console.log(process.env.VUE_APP_NAME)// 默认环境下打印的就是娄渊洋 bsy 环境下就是 白衫云

如果我们项在html中使用全局配置项的值，需要我们先在return 中赋值一下，然后 才可以通过 { {}}，拿到你想要用的值。

如何运行环境

运行默认环境 npm run serve
运行指定的环境 npm run serve:bsy
默认环境打包 npm run build
指定环境打包 npm run build:bsy
只需切换不同的环境名即可

到此这篇关于“vue项目多环境配置的原因是什么，怎么样做”的文章就介绍到这了,更多相关内容请搜索群英网络以前的文章或继续浏览下面的相关文章，希望大家以后多多支持群英网络！

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• javascript对象比较的方式有哪些？

  这篇文章给大家分享的是有关javascript对象比较的内容，包括引用比较、手动比较、浅层比较和深层比较这四种方式，感兴趣的朋友就继续往下看吧。

• TS中引用路径别名报错怎么回事，如何解决

  本文主要介绍了Typescript中使用引用路径别名报错的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• 详解Node.js框架express实现登录过程是怎样的

  目录:访问视图Post请求Post请求-body(1)Post请求-body(2)Post登陆1Post登陆2页面访问控制1页面访问控制2访问视图前面我们已经添加了视图模板并学习了访问视图的方法，那我们就先回顾一下。1.参考以下代码，地址栏访问这几个请求路径查看是否可以成功。app.get('/',function(req,res){res.ren

• 基于VUE框架如何制作自定义三级联动，过程是什么

  这篇文章主要介绍了vant picker+popup 自定义三级联动案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

• instanceof的功能和原理怎么理解，如何手动实现instanceof

  instanceof运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上，本文重点给大家介绍JavaScript手动实现instanceof的问题，感兴趣的朋友跟随小编一起看看吧