vue项目多环境变量配置

最新推荐文章于 2025-06-19 09:37:21 发布

虞南北

最新推荐文章于 2025-06-19 09:37:21 发布

阅读量789

点赞数 1

CC 4.0 BY-SA版权

分类专栏：项目

本文链接：https://blog.youkuaiyun.com/weixin_57748960/article/details/117475067

项目专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Vue项目中配置多环境变量，包括创建`.env`文件（如`.env.test`, `.env.development`, `.env.production`），规定属性名以`VUE_APP_`开头，并在`package.json`、`vue.config.js`中使用这些变量。通过不同命令（如`npm run serve`, `npm run build`, `npm run test`）加载不同的环境配置。" 45894431,4842405,Unity Playmaker输入系统实战教程,"['Unity开发', '游戏编程', 'Playmaker框架', '游戏逻辑', '交互设计']

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

介绍

通过为 .env 文件增加后缀来设置某个模式下特有的环境变量
通过传递 --mode 选项参数为命令行覆写默认的模式

在项目的根目录(与package.json同级)新建3个文件夹，

".env"文件命名不一定非要development、production、test。是可以自定义的，前提是得在package.json里面做对应的名称修改！(注意命名要语义化方便理解)

.env.test 测试环境配置，
.env.development 开发环境配置，
.env.production 生产环境配置

接下来是不同文件里面的代码情况，

注意：属性名必须以VUE_APP_开头，比如VUE_APP_XXX
.env.test（测试环境配置文件）

NODE_ENV = 'development'//环境标志
VUE_APP_CURRENTMODE = 'development'
VUE_APP_BASEURL = '本地开发api地址'

.env.development（开发环境下的配置文件）

NODE_ENV = 'production'
VUE_APP_CURRENTMODE = 'test'
VUE_APP_BASEURL = '测试环境api地址'

.env.production（生产环境下的配置文件）

NODE_ENV = 'production'
VUE_APP_CURRENTMODE = 'production'
VUE_APP_BASEURL = '正式环境api地址'

文件的加载：

根据启动命令vue会自动加载对应的环境，vue是根据文件名进行加载的
.env文件中的默认属性有NODE_ENV和VUE_APP_ENV
添加的属性名必须以 VUE_APP_ 开头，如：VUE_APP_XXX
可以通过process.env在任何地方访问到当前环境配置属性
比如执行npm run serve命令，会自动加载.env.development文件

使用

配置package.json文件
使用配置的环境变量
配置vue.config.js文件

在根目录下新建 “vue.config.js” 文件，并打印 process.env.VUE_APP_SERVER_URL 的内容，然后运行npm run serve 命令。可以看到命令行在执行“vue-cli-service serve”的同时加上了“–mode development”，紧接着输出了“.env.development”文件内的接口地址————“http://development”。说明此时我们的环境变量已经配置成功了！
分别执行
npm run build
npm run test
查看环境变量是否改变，改变了就是成功