vue3+vite使用环境变量.env的一些配置情况详细说明

下面是关于"vue3+vite使用环境变量.env的一些配置情况详细说明"的完整攻略。

简介

在Vue3和Vite开发环境中，使用环境变量可助力于管理不同的配置文件，例如本地开发环境、生产环境等。

当我们需要在不同的环境中配置不同的API地址、配置信息等时，使用环境变量便能够让我们的代码变得更加灵活通用。在这里，我们将详细说明如何在Vue3+Vite项目中使用环境变量。

配置方法

1. 使用Vite自带的.env

在Vite中，使用环境变量可以使用Vite自带的.env(可选.env.local或.env.[mode])文件进行配置。

在项目根目录下创建.env文件，在里面定义相应的环境变量。

例如，我们定义一个名字为VITE_APP_TITLE的环境变量，值为My App，将在项目中的APP_TITLE使用到。

VITE_APP_TITLE=My App

请注意，.env文件内需要加上前缀VITE_，否则环境变量将无法识别。

在Vue3项目中，使用环境变量可以使用process.env.<key>进行访问。例如，上述环境变量可以这样引用：

const appName = process.env.VITE_APP_TITLE;

2. 使用dotenv库

dotenv是一个让你能够以更便捷的方式管理环境变量的Node.js包。使用这个库，可以使你的.env文件内容和问题更加精简易懂。

我们可以先在项目中安装dotenv:

npm install dotenv --save-dev

在Vue的根目录下创建.Hmr 文件，并在其中添加环境变量。

APP_TITLE=My App

在main.js中引入dotenv：

import dotenv from 'dotenv';
dotenv.config({ path: '.env' });

在页面中使用可以使用 process.env.<key>来获取value，注意和第1种方法一样，必须加上APP_ 前缀：

const appName = process.env.APP_TITLE;

3. 使用.env文件指定不同环境的配置

如果您需要针对不同的环境分别配置不同的变量，那么你可以在project根目录创建以下env文件：

.env                # Default
.env.local          # Local development
.env.test           # Integration Test
.env.production     # Production
.env.development    # Development

Vite在编译时会自定加载匹配的文件。例如，在 development 模式下，我们可以使用 .env.development 文件。

当目标环境为开发环境的时候，可以新增一个.env.development文件：

# .env.development
VITE_APP_URL=http://localhost:3000

示例说明

下面将具体说明如何在Vue3+Vite项目中使用环境变量的示例。

示例1：定义API地址

在这个示例中，我们需要定义API地址，以便在开发环境、测试环境、生产环境中使用。首先，我们在项目根目录下创建4个不同的.env文件：

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

在.env.development、.env.test、.env.production文件中，我们定义API地址，例如：

# .env.development
VITE_API_URL=http://localhost:3000

使用process.env.VITE_API_URL能够获取定义的API地址。

示例2：定义应用标题

在这个示例中，我们需要在Vue3应用中显示明确的应用标题。我们在项目根目录下创建.env文件：

VITE_APP_TITLE=My App

在Vue应用中，使用process.env.VITE_APP_TITLE即可获取定义的应用标题。

总之，环境变量的使用场景非常广泛。在Vue3+Vite开发中，使用环境变量可以更加方便地管理各种配置信息。