如何在 vite 中正确导入 `import.meta.env`?
时间: 2024-10-09 17:12:01 浏览: 188
在 vite 应用中,你可以通过以下步骤正确导入 import.meta.env
:
设置vite的环境变量:首先确保你在你的项目配置中设置了环境变量。这通常会在
vite.config.ts
或vite.config.js
中完成。例如,如果你使用的是 vite-plugin-env-import 插件,可以这样配置:import { defineConfig } from 'vite'; import { createVuePlugin } from '@vitejs/plugin-vue'; import env from '@vitejs/plugin-env-import'; export default defineConfig({ plugins: [ createVuePlugin(), env({ include: ['**/.env.{js,ts}'], }), ], });
导入环境变量:然后在你的组件、服务或其他模块中,使用
import.meta.env
获取变量:// main.ts 或 main.js import { env } from 'vite/client'; // 这是vite内置的对import.meta.env的支持 const apiUrl = env.VITE_API_URL;
或者直接在需要的模块中导入,前提是你的项目支持按需加载:
// components/MyComponent.vue 或 utils/myUtils.ts import { VITE_API_URL } from '$vite/dist/client/env'; const apiUrl = VITE_API_URL;
确保你已经在项目的构建过程中正确处理了环境变量的导入,否则可能会遇到类型提示的问题。
阅读全文
相关推荐


















