vue cli配置详解,vue.env
众所周知，一个项目在开发、测试和生产环境中的配置变量是不同的。但是，在vue cli 3中的命令vue create xxx创建的项目中，已经取消了默认的config和build文件夹，这使得新的合作伙伴不知道在哪里配置环境变量。不过官方也提供了相应的配置方式。本文将介绍它们。
目录
简介-官方示例配置
前言
相信用过vueCli开发项目的小伙伴都有点郁闷。正常开发时会有三种接口环境(开发、测试和正式)，但vueCli只提供两种开发、生产模式(不包括测试——单测)。其实这是小伙伴们不了解vueCli文档造成的。
在vueCli命令中，- mode对应于。环境。[mode]而不是NODE_ENV。
注意
除了VUE应用程序变量。
还有两个特殊变量：
NODE_ENV:是开发、生产、测试之一。它的值取决于应用程序运行的模式。
BASE_URL:与vue.config.js中的publicPath选项一致，即你的应用将被部署到的基本路径。
简介-官方
是mode Vue CLI项目中的一个重要概念。默认情况下，Vue CLI项目有三种模式：
开发模式用于vue-cli-service服务
测试模式用于vue-CLI-服务测试：单元。
生产模式用于vue-cli服务构建和vue-cli服务测试：e2e
您可以通过传递- mode选项参数来覆盖命令行的默认模式。
运行vue-cli-service命令时，将从相应的环境文件中加载所有环境变量。如果文件中不包含NODE_ENV变量，其值将取决于模式，例如，在生产模式下设置为“生产”，在测试模式下设置为“测试”，默认情况下设置为“开发”。
NODE_ENV将决定您的应用程序的运行模式，无论是开发、生产还是测试，因此它也决定了要创建哪个webpack配置。
例如，通过将NODE_ENV设置为“test ”, Vue CLI将创建一个专为单元测试设计的优化webpack配置。它不会处理单元测试不需要的图片和其他资源。
类似地，NODE_ENV=development创建了一个webpack配置，该配置支持热更新，不哈希资源或类型供应商包，因此可以在开发期间快速重建。
当您运行vue-cli-service build命令时，无论您想要部署到哪个环境，您都应该始终将NODE_ENV设置为“production ”,以获得可用于部署的应用程序。
示例配置
现在我们有三个配置文件，如下所示
#.env.development
节点环境=开发
VUE _ APP _ AXIOS _ BASEURL=http://xxxx
测试环境的#.env.preview配置
节点环境=生产
VUE _ APP _ AXIOS _ BASEURL=http://xxxx
#.env.production
节点环境=生产
VUE _ APP _ AXIOS _ BASEURL=http://xxxx
在axios中使用
从“axios”导入axios；
const conf={
base URL:process . env . vue _ APP _ AXIOS _ base URL，
};
返回axios . create(conf)；
Package.json配置
{
脚本:{
serve: vue-cli-service serve ，
build : vue-CLI-服务构建模式预览，
内部版本：发布: vue-CLI-服务内部版本
}
}
起动加浓系
Nmrunserve #默认开发
Nmrunbuild #测试环境
Npm运行构建：发布#正式环境
关于vue cli中env的使用指南这篇文章到此为止。有关vue cli env的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。