vue cli4-环境变量和模式_vue4.4需要的mode版本-CSDN博客

本文链接：https://blog.csdn.net/qq_28988969/article/details/104558991

本文详细介绍了Vue CLI4中环境变量的使用，包括以VUE_APP_开头的变量，以及如何在不同模式（development, production, test）下设置环境变量，特别是NODE_ENV和BASE_URL的设定。同时，通过例子展示了如何根据环境变量为axios配置不同baseUrl，并解释了模式的优先级和如何自定义新的模式，如创建fat模式并配置相应环境变量。" 122295390,2081259,Qt开源项目精选：游戏编辑器、笔记客户端与数据库工具,"['Qt开发', '游戏开发', '数据库管理', '笔记应用', '多媒体']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官方文档

环境变量

一个环境变量文件只包含环境变量的键值对：

NODE_ENV=development
VUE_APP_BASE_URL=http://127.0.0.1:8080/

注意：

NODE_ENV - 是 “development”、“production” 、"test"或者自定义的值。具体的值取决于应用运行的模式
BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径
除了 NODE_ENV 和 BASE_URL，其他的环境变量必须以 VUE_APP_ 开头
项目中使用：process.env.环境变量名，eg：VUE_APP_BASE_URL

模式

模式是 Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式：

development 模式用于 vue-cli-service serve
production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
test 模式用于 vue-cli-service test:unit

注意点：

一个模式可以包含多个环境变量
每个模式都会将环境变量中 NODE_ENV 的值设置为模式的名称
可以通过为 .env 文件增加后缀来设置某个模式下特有的环境变量
为一个特定模式准备的环境文件 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级
此外，Vue CLI 启动时已经存在的环境变量拥有最高优先级，并不会被 .env 文件覆写

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入，优先级高于.env和.env.local
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略，优先级高于.env和.env.local

例子：不同模式下，为axios指定不同的baseUrl

创建development模式的环境变量文件，项目根目录下新建.env.development文件

NODE_ENV=development
VUE_APP_BASE_URL=http