使用 vite 时如何添加 process.env ？

vite 是一个现代化的前端构建工具，它不同于 webpack，在环境变量处理上也有所不同。vite 没有内置的 process.env 全局变量，因为它默认不会向客户端代码暴露所有环境变量，这样做是为了安全起见。但是，你可以通过以下步骤添加和使用环境变量：

1. 在项目根目录创建环境变量文件：

   通常你可以创建一个 .env 文件来存放你的环境变量，或者是为不同的环境创建专门的文件，比如 .env.development 或 .env.production。

   shell
   # .env 文件
   VITE_API_URL=http://localhost:3000

   vite 要求所有在 .env 文件中的环境变量必须以 VITE_ 开头，以便它知道哪些变量是可以被暴露给浏览器的。

2. 读取你的环境变量：

   在你的 JavaScript 或 TypeScript 代码中，你可以用 import.meta.env 来访问环境变量。

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

   vite 会在构建时将 import.meta.env.VITE_API_URL 替换为实际的环境变量值。

3. 类型支持：

   如果你使用 TypeScript，你可能想要在 env.d.ts 文件中声明你的环境变量类型，以获得更好的类型支持：

   typescript
   /// <reference types="vite/client" />
   
   interface ImportMetaEnv {
     readonly VITE_API_URL: string;
     // 你可以在这里继续添加更多的环境变量
   }
   
   interface ImportMeta {
     readonly env: ImportMetaEnv;
   }

4. 在 vite.config.js 或 vite.config.ts 中使用环境变量：

   如果你需要在 Vite 配置文件中访问环境变量，可以使用 process.env 或者 loadEnv 方法。

   javascript
   import { defineConfig, loadEnv } from 'vite';
   
   export default ({ mode }) => {
     // 当需要在配置文件中使用环境变量时
     process.env = {...process.env, ...loadEnv(mode, process.cwd())};
   
     // 在配置中使用环境变量
     console.log(process.env.VITE_API_URL);
   
     return defineConfig({
       // 配置
     });
   };

确保在部署应用程序时设置正确的环境变量。如果你使用的是 Vercel、Netlify 或类似的平台，通常在它们的控制面板中设置环境变量。如果你在自己的服务器上部署，你可能需要在服务器的环境中设置这些变量。

另外，不要将密钥或任何敏感信息放入 .env 文件中，除非你确定它们不会被编译进客户端代码。因为任何编译进客户端代码的环境变量都是可以被用户查看的。