vue3 vite 配置环境变量

在 Vue 3 中使用 Vite 可以很容易地配置环境变量。以下是基础的配置步骤：

1. 在项目根目录下创建 `.env` 文件，并添加相关的环境变量。例如：

VITE_API_URL=https://api.example.com

2. 在代码中使用 `import.meta.env` 来访问环境变量。例如：

const apiUrl = import.meta.env.VITE_API_URL;

3. 在 `vite.config.js` 文件中添加以下代码来启用环境变量：

export default {
  // ...
  define: {
    // 定义环境变量
    'import.meta.env.VITE_API_URL': process.env.VITE_API_URL,
    // ...
  },
  // ...
}

此时，`process.env.VITE_API_URL` 将会被替换为 `.env` 文件中定义的环境变量。可以在代码中使用 `import.meta.env.VITE_API_URL` 来访问该变量。

注意，Vite 中的环境变量只能在代码中使用，而无法在 HTML 文件中使用。如果需要在 HTML 文件中使用环境变量，可以使用插件来实现。