Vue和React 环境变量

最新推荐文章于 2025-07-17 10:51:52 发布

Felix皇子

最新推荐文章于 2025-07-17 10:51:52 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端开发文章标签： Vue React 环境变量

本文链接：https://blog.youkuaiyun.com/F_Felix/article/details/98033843

本文介绍了Vue和React项目中配置和使用环境变量的方法。在Vue中，通过创建不同模式的环境文件，如`env.development.js`、`env.production.js`，并使用`process.env`访问变量。在React中，环境变量也需要以`REACT_APP_`开头，并通过类似的方式配置。在构建时，Vue CLI和Create React App会根据运行的命令选择对应的环境文件。

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

Vue和React 环境变量

一般我们开发的时候有这么几个环境，开发环境（development ）、测试环境（test）、生产(线上)环境（production），而这也就导致了我们在不同的环境情况下，请求数据的地址是不同的，但是我们如果没切换一个环境都修改咱们的代码中的请求地址，这显然是不明智的，因此就了配置环境变量一说

Vue

需要在Vue的脚手架（Vue-CLI）中使用

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

我们常用的基本上就下面几个，为一个特定模式准备的环境文件的 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级。

.env.development
.env.production
.env.test

在文件中配置

一个环境文件只包含环境变量的“键=值”对

FOO=bar
VUE_APP_SECRET=secret
VUE_APP_URL=http://localhost:80

最低0.47元/天解锁文章

200万优质内容无限畅学