环境变量

Dotenv 文件

WXT 支持与 Vite 相同的 dotenv 文件。你可以创建以下任意文件：

.env
.env.local
.env.[mode]
.env.[mode].local
.env.[browser]
.env.[browser].local
.env.[mode].[browser]
.env.[mode].[browser].local

文件中列出的所有环境变量都可以在运行时使用：

# .env
WXT_API_KEY=...

await fetch(`/some-api?apiKey=${import.meta.env.WXT_API_KEY}`);

请记住，环境变量需要以 WXT_ 或 VITE_ 为前缀，否则它们在运行时将不可用，这是 Vite 的约定。

内置环境变量

WXT 根据当前命令提供了一些自定义环境变量：

用法	类型	描述
import.meta.env.MANIFEST_VERSION	2 │ 3	目标 manifest 版本
import.meta.env.BROWSER	string	目标浏览器
import.meta.env.CHROME	boolean	等同于 import.meta.env.BROWSER === "chrome"
import.meta.env.FIREFOX	boolean	等同于 import.meta.env.BROWSER === "firefox"
import.meta.env.SAFARI	boolean	等同于 import.meta.env.BROWSER === "safari"
import.meta.env.EDGE	boolean	等同于 import.meta.env.BROWSER === "edge"
import.meta.env.OPERA	boolean	等同于 import.meta.env.BROWSER === "opera"

你可以设置 targetBrowsers 选项，使 BROWSER 变量具有更具体的类型，例如 "chrome" | "firefox"。

你还可以访问所有 Vite 的环境变量：

用法	类型	描述
import.meta.env.MODE	string	扩展运行的模式
import.meta.env.PROD	boolean	当 NODE_ENV='production' 时为 true
import.meta.env.DEV	boolean	与 import.meta.env.PROD 相反

其他 Vite 环境变量

Vite 提供了另外两个环境变量，但它们在 WXT 项目中没有用处：

• import.meta.env.BASE_URL：请改用 browser.runtime.getURL。
• import.meta.env.SSR：始终为 false。

Manifest

要在 manifest 中使用环境变量，你需要使用函数语法：

export default defineConfig({
  modules: ['@wxt-dev/module-vue'],
  manifest: { 
    oauth2: { 
      client_id: import.meta.env.WXT_APP_CLIENT_ID
    } 
  } 
  manifest: () => ({ 
    oauth2: { 
      client_id: import.meta.env.WXT_APP_CLIENT_ID
    } 
  }), 
});

WXT 无法在配置文件加载完成之前加载你的 .env 文件。因此，通过对 manifest 使用函数语法，可以将对象的创建推迟到 .env 文件加载到进程之后。

请注意，Vite 的运行时环境变量（如 import.meta.env.DEV）将不会被定义。你可以通过以下方式访问 mode：

export default defineConfig({
  manifest: ({ mode }) => {
    const isDev = mode === 'development';
    console.log('Is development mode:', isDev);

    // ...
  },
});