vite环境变量配置

Vite是一个现代的前端构建工具，它支持快速热更新和预渲染。对于环境变量配置，Vite通常通过`.env`文件、`.env.ts`（TypeScript版本）、或直接在`vite.config.js`中设置环境变量。

1. 使用`.env`文件：创建一个名为`.env`或`.env.production`的文件，用于存储非敏感的生产环境变量，如API地址。内容格式通常是键值对，例如 `VITE_API_URL=https://api.example.com`。Vite会自动读取并替换这些变量到你的项目中。

2. `.env.ts`（TypeScript支持）：如果你的项目需要更强的类型安全，可以使用`.env.ts`文件，这里可以直接导入环境变量并定义它们的类型，例如 `process.env.VITE_API_URL!: string`。

3. `vite.config.js`配置：在项目的`vite.config.js`文件中，你可以直接访问`import()`函数从环境变量文件中导入变量，然后将其作为配置的一部分。比如：

const isProd = process.env.NODE_ENV === 'production'
export default defineConfig({
  //...
  env: {
    VITE_API_URL: isProd ? process.env.VITE_API_URL : 'http://localhost:8080',
  },
})

相关问题

vite 环境变量配置

Vite 是一个基于 ES 模块的现代前端构建工具，它提供了一个轻量级、快速的开发体验。在 Vite 中，环境变量配置通常通过 `.env` 文件或者称为“环境插件”来进行管理，目的是为了在生产环境和开发环境中分离敏感信息和配置。

1. **`.env` 文件**: 使用 `.env` 文件可以保存全局的环境变量。Vite 支持自动加载 `.env`, `.env.local`, 和 `.env.{stage}`（如 `.env.dev` 或 `.env.production`) 文件，其中 `{stage}` 可以是 `dev`, `prod`, `test` 等。每个阶段对应一个特定的环境变量集。例如：

   PORT=8080
   API_URL=http://localhost:3000

2. **环境插件 (vite-plugin-env)**: Vite 官方推荐使用第三方插件如 `vite-plugin-env` 来更方便地处理环境变量。通过该插件，你可以通过 `process.env.VAR_NAME` 访问环境变量，它们会被解析成相应的值。

3. **Vite 构建命令**: 当你在构建应用时，你可以传递环境变量到 Vite，这通常是通过 `VITE_MODE` 或者 `VITE_CONFIG` 环境变量来指定，例如：
- 开发模式 (`dev`): `VITE_MODE=development vite`
- 生产模式 (`prod`): `VITE_MODE=production vite build`

4. **跨平台部署**:
- 对于CI/CD系统，你可以通过配置 CI 工具（如 GitLab CI/CD, CircleCI, Travis CI 等）将不同的环境变量传入构建过程。

配置完成后，Vite 将在相应的环境中加载不同的变量，以便保持代码的灵活性和安全性。

vue vite 环境变量

### 配置和使用环境变量

#### 创建不同模式下的环境变量文件

为了支持不同的运行模式，在项目的根目录下创建相应的`.env`文件。通常情况下，至少会存在三种类型的环境配置文件：

- `.env.development`: 用于开发环境的设置[^5]。
- `.env.production`: 生产环境中使用的配置项。
- `.env.test`: 测试环境下特有的参数设定。

这些文件中的每一项都遵循特定命名约定——即所有的键都需要以前缀 `VITE_` 开始才能被 Vite 处理并暴露给应用程序[^1]。

#### 编写环境变量

在上述任一`.env.*`文件内编写环境变量时，每行定义一个变量，格式如下所示：

# .env.example
VITE_APP_TITLE="My Awesome App"
VITE_API_URL=https://api.example.com/

注意：只有带有前缀`VITE_` 的变量会被加载到客户端侧代码中作为全局常量访问；其他未加此前缀者仅限于构建过程中读取[^2]。

#### 修改 vite.config.js 来适应多环境部署

为了让应用能够识别当前所处的工作模式（development/production/test），可以在`vite.config.js`里通过命令行传入的 mode 参数来进行区分处理[^4]:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default ({ command, mode }) => {
  console.log(`Running ${command} with mode "${mode}"`)
  
  return defineConfig({
    plugins: [vue()],
    
    // 可选地基于工作模式调整配置...
    ...(mode === 'test' && {
      test: {
        globals: true,
        environment: 'happy-dom',
      },
    }),
  })
}

#### 访问环境变量

一旦按照前述方法设置了环境变量之后，在 Vue 组件或其他 JavaScript 文件里面就可以很方便地获取它们了。例如，在组件内部可以通过 `import.meta.env.VITE_*` 形式的语法来引用已声明好的环境变量[^3] :

<template>
  <div id="app">
    {{ appTitle }}
  </div>
</template>

<script setup lang="ts">
const appTitle = import.meta.env.VITE_APP_TITLE;
console.log(import.meta.env.VITE_API_URL);
</script>