Vite中如何.env.development、.env.production 环境变量配置

最新推荐文章于 2025-05-25 09:37:01 发布

zhige@

最新推荐文章于 2025-05-25 09:37:01 发布

阅读量2.8k

点赞数 8

CC 4.0 BY-SA版权

文章标签：前端 javascript linux Vite

本文链接：https://blog.youkuaiyun.com/nyasm/article/details/136119495

本文介绍了如何在VueVite项目中使用`.env.development`和`.env.production`文件来分别管理开发和生产环境的页面标题和API路径，通过`import.meta.env`导入环境变量以便在代码中切换环境设置。

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

1、首先在项目根目录创建.env.development、.env.production两个文件

.env.development文件

# 页面标题
VITE_APP_TITLE = 测试环境标题

# 开发环境配置
VITE_APP_ENV = 'development'

# 开发环境
VITE_APP_BASE_API = '/dev-api'

.env.production文件

# 页面标题
VITE_APP_TITLE = 生产环境标题

# 生产环境配置
VITE_APP_ENV = 'production'

# 生产环

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zhige@

关注关注

8
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue配置开发环境.env.development 和生产环境.env.production，在前端解决跨域问题

zx15271563333的博客

01-11

1131

在上面的例子中，我们使用了VUE_APP_API_BASE_URL作为API的基本URL。现在，你可以在Vue项目的代码中使用process.env.VUE_APP_API_BASE_URL来访问不同环境下的API基本URL。所有以/api开头的请求将被代理到VUE_APP_API_BASE_URL所指定的地址，并通过changeOrigin: true确保请求头中的Host字段正确。在生产环境中，你不需要配置代理，因为在生产环境下，你的前端代码和后端代码通常会部署到同一个域名下。

Vite + Vue3 项目中.env.development、.env.production 和 .env.test 等环境配置文件使用详解

cuijiying的博客

01-17

5443

使用Vite+Vue3开发项目时，`.env.development`、`.env.production`和`.env.test`是Vite提供的环境配置文件，用于定义不同环境下的变量，比如开发、生产和测试环境的配置

参与评论您还未登录，请先登录后发表或查看评论

vite项目中vite.config.js使用.env.development文件中的配置数据

初遇你时动了情

03-19

358

【代码】vite项目中vite.config.js使用.env.development文件中的配置数据。

vue3+vite配置.env文件环境变量

最新发布

2401_82591622的博客

05-25

953

通过合理配置.env文件，可以有效管理项目中的环境变量，确保在不同环境下应用的正确运行和安全性。以下是一些关键点：（1）使用和.env.test文件来管理不同环境的配置。（2）确保所有环境变量以VITE_开头，以便在客户端代码中访问。（3）不要在.env文件中存储敏感信息。（4）使用.gitignore文件排除.env文件，避免敏感信息泄露。

vite.config.js中调用.env.development或.env.production中的配置

dnpao的专栏

12-13

1202

【代码】vite.config.js中调用.env.development或.env.production中的配置。

Vite构建的Vue项目的环境变量设置——.env.development与.env.production

警警的博客

12-29

1679

在 Vite 项目中，为 Node.js 18 配置生产环境和开发环境下的环境变量，可以按照以下步骤进行：项目根目录下创建环境变量文件：定义环境变量：在客户端代码中访问环境变量：在 Vite 配置文件（如或）中访问环境变量：在中配置启动脚本：例如：四、注意事项 环境变量的优先级：避免在客户端代码中暴露敏感信息：重启开发服务器：通过以上步骤，你可以在 Vite 项目中为 Node.js 18 配置生产环境和开发环境下的环境变量，并在代码中正确地访问它们。

在 Vue3 +Vite环境中使用.env 环境配置文件

半只

12-09

2003

在 Vue3 +Vite环境中使用.env 环境配置文件 # 1、安装 dotenv ```npm npm install dotenv --save ``` # 2、项目根目录创建 .env相关环境配置文件 `.env.development` 开发环境配置文件 `.env.production` 生产环境配置文件示例创建一个 `.env.development` 开发环境配置文件内容这里要注意，环境配置变量名必须是要 `VITE_` 开头的才会被扫描然后暴露出去，在 Vue

vue3+Vite+Js项目搭建之：.env、.env.development、.env.production 环境变量配置

m0_68716504的博客

01-10

1009

环境变量。

vite配置开发环境和生产环境

qq_42351255的博客

06-15

1558

【代码】vite配置开发环境和生产环境。

vite项目中.env,.env.development,.env.production 环境变量配置及使用

11-09

vite项目中，我们可以使用.env、.env.development、.env.production文件来配置环境变量。其中，.env文件是所有情况下都会用到的配置文件，而.env.development和.env.production文件则是分别用于开发环境和生产环境的...

Vue3.0+vite vite.config.ts配置与env

qq_42396791的博客

03-15

2714

【代码】Vue3.0 vite.config.ts配置。

Vite使用.env文件

qq_43806604的博客

01-11

9243

Vite使用.env文件开发中经常会使用环境变量，Vite相比于Webpack 也有一定的变化项目目录下创建.env.development .dev.production文件 NODE_ENV = 'development' VITE_APP_BASE_API = '/api' // 暴露必须以VITE开头才能被Vite识别项目使用 import.meta.env.XXXX if (process.env.NODE_ENV === 'development') { BASE_URL

vue项目下.env.development环境变量配置文件

m0_69057918的博客

11-22

2707

.env.development环境变量配置文件详解

vue3+vite配置反向代理+结合.env.development文件

m0_56245485的博客

12-18

3689

参考官网：https://cn.vitejs.dev/config/server-options.html#server-host原理大意：服务器和服务器之间默认是没有跨域限制的，vite通过开启代理服务器充当中间角色，将客户端的请求转发到服务器上，服务器响应后，再将响应结果返回给客户端。注意：vite反向代理仅在开发环境有用，如果打包了，就不会走反向代理了，这是因为打包后vue3项目会被编译成纯前端代码，一般情况下它会被放在和后端一样的ip端口下，这个时候就不会有跨域问题了。 npm run dev

VUE3中，使用.env.development和.env.production

故里2130

01-05

7718

在实际项目开发过程中，可能开发环境和生产（测试）环境不一样，经常需要修改配置常量，才能满足对应的环境，才能使软件运行起来。6.此时，我这里使用nginx进行发布，当然你也可以使用别的发布网址，比如IIS等等。4.打包后，之前的config.js就没有了，复制所有的打包文件。nginx的配置，之前文档已经介绍了，这里不再说明。5.选择build，生成生产模式，程序就在dist中。1.打包前，在项目的根目录中，创建config.js。部署完成后，直接打开，我这里是808端口。开头，否则无法识别，如图所示。

env环境配置

weixin_52104111的博客

08-13

555

eny:代表了当前项目环境配置.env.development:开发环境配置.env.production:配置生产环境.env.test:配置测试环境环境变量的key必须是VUE_APP开头的。在Node环境下面提供的全局变量process，可以直接使用。

vue中 .env .env.development .env.production 详细说明

qq_43985303的博客

08-17

1498

如上图所示，如过我们运行npm run serve 在就先加载.env文件，之后加载.env.development文件，两个文件有同一个项，则后加载的文件就会覆盖掉第一个文件，即.env.development文件覆盖掉了.env文件的NOOE_ENV选项。备注：js文件中可以添加JSON.stringify(xxxxxx)，解析成字符，但是vue中不能。比如执行npm run serve命令，会自动加载.env.development文件。注意：.env文件无论是开发还是生成都会加载。

四，vite开发环境、生产环境配置