WXT浏览器插件开发中文教程(6)----WXT配置详解之环境变量

前言

大家好，我是倔强青铜三 。是一名热情的软件工程师，我热衷于分享和传播IT技术，致力于通过我的知识和技能推动技术交流与创新，欢迎关注我，微信公众号：倔强青铜三。欢迎点赞、收藏、关注，一键三连！！！

环境变量 ​

Dotenv 文件 [​](#Dotenv 文件 "#dotenv-%E6%96%87%E4%BB%B6")

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}`);

请记住，按照 Vite 的约定，环境变量必须以 WXT_ 或 VITE_ 开头，否则它们在运行时将不可用。

内置环境变量 ​

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

用法	类型	描述
import.meta.env.MANIFEST_VERSION	2 │ 3	目标清单版本
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"

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

用法	类型	描述
import.meta.env.MODE	string	扩展程序运行的 模式
import.meta.env.PROD	boolean	当 NODE_ENV='production' 时
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。

清单中使用环境变量

要在清单中使用环境变量，您需要使用函数语法：

export default defineConfig({
  extensionApi: 'chrome',
  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 文件被加载到进程中。

最后感谢阅读！欢迎关注我，微信公众号 ：倔强青铜三。欢迎点赞、收藏、关注，一键三连！！！