vite.config.ts使用怎么.env.development的变量
时间: 2023-08-25 11:30:16 浏览: 52
在 Vite 中,我们可以使用 `process.env` 来获取环境变量,但是需要注意的是,在 `.env` 文件中定义的变量只能在客户端代码中使用,无法在 `vite.config.ts` 中使用。
如果需要在 `vite.config.ts` 中使用 `.env` 文件中的变量,可以使用 `dotenv` 这个 npm 包。安装完 `dotenv` 后,在 `vite.config.ts` 中引入 `dotenv/config` 并调用,就可以获取 `.env` 文件中定义的变量了。
举个例子,如果我们在 `.env.development` 文件中定义了一个名为 `VITE_APP_BASE_API` 的变量,可以在 `vite.config.ts` 中这样获取:
```typescript
import { defineConfig } from 'vite';
import dotenv from 'dotenv/config';
dotenv();
export default defineConfig({
build: {
// ...
},
server: {
// 从环境变量中获取端口号
port: Number(process.env.PORT),
},
proxy: {
// 从环境变量中获取代理地址
'/api': {
target: process.env.VITE_APP_BASE_API,
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},
},
});
```
需要注意的是,使用 `dotenv/config` 时,需要在 `vite.config.ts` 中的其他代码之前调用它,这样才能保证其他代码中可以正确获取环境变量。