博客站

在 Vite 中处理环境变量非常简单，Vite 提供了内置的支持来管理不同环境下的变量。以下是详细步骤和配置说明：

1. 环境变量文件

• 默认环境变量文件：
  • .env：所有环境都会加载。
  • .env.development：开发环境加载。
  • .env.production：生产环境加载。
  • .env.[mode]：特定模式加载，例如 .env.staging。
• 文件内容：环境变量文件中的变量以 VITE_ 开头，例如：

  VITE_API_URL=https://api.example.com
  VITE_DEBUG=true
  

2. 访问环境变量

• 在代码中访问：通过 import.meta.env 访问环境变量。

  console.log(import.meta.env.VITE_API_URL);
  console.log(import.meta.env.VITE_DEBUG);
  

• 在 HTML 中访问：使用 %ENV_NAME% 语法访问环境变量。

  <title>%VITE_APP_TITLE%</title>
  

3. 自定义环境变量前缀

• 配置 envPrefix：可以通过 envPrefix 配置自定义环境变量前缀。

  export default defineConfig({
    envPrefix: 'CUSTOM_',
  });
  

• 环境变量文件：

  CUSTOM_API_URL=https://api.example.com
  CUSTOM_DEBUG=true
  

• 访问环境变量：

  console.log(import.meta.env.CUSTOM_API_URL);
  console.log(import.meta.env.CUSTOM_DEBUG);
  

4. 模式（Mode）

• 默认模式：Vite 默认有两种模式：development 和 production。
• 自定义模式：可以通过 --mode 参数指定自定义模式。

  vite build --mode staging
  

• 环境变量文件：.env.staging 文件会被加载。

5. 在配置文件中使用环境变量

• 在 vite.config.js 中使用：可以通过 process.env 访问环境变量。

  export default defineConfig(({ mode }) => ({
    define: {
      'process.env.VITE_API_URL': JSON.stringify(process.env.VITE_API_URL),
    },
  }));
  

6. 示例：完整的环境变量处理

• 项目结构：

  vite-env-project/
  ├── public/
  ├── src/
  │   ├── main.js
  │   └── App.vue
  ├── .env
  ├── .env.development
  ├── .env.production
  ├── vite.config.js
  └── package.json
  

• .env：

  VITE_APP_TITLE=My App
  

• .env.development：

  VITE_API_URL=https://dev.api.example.com
  VITE_DEBUG=true
  

• .env.production：

  VITE_API_URL=https://api.example.com
  VITE_DEBUG=false
  

• src/main.js：

  console.log(import.meta.env.VITE_APP_TITLE);
  console.log(import.meta.env.VITE_API_URL);
  console.log(import.meta.env.VITE_DEBUG);
  

• vite.config.js：

  import { defineConfig } from 'vite';
  import vue from '@vitejs/plugin-vue';
  
  export default defineConfig(({ mode }) => ({
    plugins: [vue()],
    define: {
      'process.env.VITE_API_URL': JSON.stringify(process.env.VITE_API_URL),
    },
  }));
  

7. 构建和运行

• 开发环境：

  npm run dev
  

• 生产环境：

  npm run build
  

• 自定义模式：

  vite build --mode staging
  

总结

Vite 通过环境变量文件和 import.meta.env 提供了简单而强大的环境变量管理功能。通过合理配置和使用环境变量，可以在不同环境下灵活地调整应用行为，提升开发效率和代码质量。