vue-cli配置,vue-cli4配置
本文主要介绍如何在vuecli4.0中配置环境变量，具有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。
:
目录
1.创建不同的环境变量文件2。向添加内容。环境文件3。在package.json 4中添加不同环境对应的执行语句。使用提示：本文仅适用于VUE-CLI 3.0版及以上~
------------------正文开始------------------
开发项目时，经常需要在不同的环境之间切换。那么我们如何配置不同的环境变量呢？
为了更容易消化这篇文章，建议先阅读官方文件：
环境变量和模式
如果看完公文不明白，可以参考这篇文章。
在vue-cli构建的项目中，默认有三种模式，如下图所示：
我个人的理解就是：
当你执行npm run serve时，对应的环境是开发环境；
当您执行npm运行构建时，对应的环境是生产环境。
如果你的开发中有三种以上的项目，你该怎么办？像我的开发项目，有本地环境(local)，开发环境(development)，测试环境(devtest)，预发布环境(beta)，生产环境(production)。请记住我括号里的英文。
来，左边跟我画条龙，右边画条彩虹~画完了，该进入主题了~
------------------进入主题------------------
1.创建不同环境变量文件
正如官方文件所说，通过在。env文件中，设置了特定模式特有的环境变量。我这里有5个环境，所以我配置了5个。环境文件。如下图：
2.给.env文件添加内容
基本格式如下：
NODE_ENV=环境名称VUE _应用程序_URL=相应的环境地址
我的本地环境的配置如下图所示：
我在本地使用easy-mock模拟数据，所以配置的地址是模拟接口地址。
3.在package.json中添加不同环境对应的执行语句
正如官方文件所说，通过passing - mode可以配置不同的模式。我自己的项目配置如下：
请注意我的配置文件中的服务和构建。
4.使用
文件已经创建，配置语句已经编写。怎么用？
您可以在主页上执行您需要的环境的命令语句。
例如，如果我现在需要一个本地环境，我将执行npm run local-serve。如下图所示：
然后通过process.env.NODE_ENV获取环境名；通过process.env.VUE_APP_url获取环境对应的URL。
例如，在axios请求中，我们可以将其baseURL设置为process.env.VUE_APP_URL，如下图所示：
后面的/web 是基于我自己的界面。不要也写一个/web 。
如果你不确定你现在在哪个环境变量里，你可以看一下console.log(当前环境变量： process.env.NODE_ENV )和console.log(当前环境路径： process.env.VUE_APP_URL)。
像我的项目中就是下面这2个东东：
输出内容是在env.local文件中配置的环境变量。
为了更好的理解，让我们执行另一个语句，npm run serve，看看此时是哪个环境变量？
为什么呢？
因为npm run serve默认指向env.developement，所以我在其中配置的环境就是上面的输出。的配置。env.developement如下：
总之，你需要哪个环境变量，只要【npm run对应的环境变量】就搞定了！
vue cli4.0环境变量配置到此为止~ ~以上是我的个人经验，希望能给你一个参考，多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。