vue cli 3 项目中配置env环境变量

最新推荐文章于 2024-08-15 15:40:35 发布

RTau

最新推荐文章于 2024-08-15 15:40:35 发布

阅读量922

点赞数

分类专栏： vue 前端文章标签： vue js

本文链接：https://blog.csdn.net/Tausum/article/details/118441192

版权

本文介绍了如何在Vue CLI 3项目中配置.env环境变量，包括.env.development、.env.production等，强调只有以VUE_APP_开头的变量会被载入，并展示了不同模式下页面调用环境变量的示例。

摘要由CSDN通过智能技术生成

众所周知，一个项目在开发、测试与生产环境的各种配置变量是不一样的，但在vue cli 3中通过指令vue create xxx创建的项目取消了默认的 config 和 build 文件夹，这导致刚入手的小伙伴不知道在哪儿配置环境变量，不过官方也提供了相应的配置方法。

可以在项目根目录中放置下列文件来指定环境变量：

# 在所有的环境中被载入
.env

# 只在指定的模式中被载入 如：development、production
.env.[mode]

# 在文件名末尾添加 .local 时，载入情况同上，但在git中会被忽略
.env[.[mode]].local

不过请注意，只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将会被vue载入到项目编译后的静态代码中，这是为了避免意外公开机器上可能具有相同名称的私钥。

命令	默认环境	配置
vue-cli-service serve	development	.env.development
vue-cli-service test:unit<

关注

专栏目录