<script setup> 都无需额外的打包器接线即可使用。
什么场景适合用 Vue
- 你已经在生产环境中部署 Vue 应用。
- 你偏好使用 Vue 单文件组件，搭配 scoped 样式与 Composition API。
- 你希望扩展 UI 与既有的 Vue 架构保持一致。
模板示例
new-vue
content-vue
在现有扩展中使用
按下面的步骤把 Vue 添加到现有扩展。安装
安装所需依赖：vue-loader 或 @vue/compiler-sfc 这类可选的 Vue 集成包时，构建错误会指出与内置工具链匹配的确切版本。错误里给出的安装命令会按你项目使用的包管理器来书写。
配置
Extension.js 期望 Vue 组件以.vue 文件存在。它会在 Rspack 管线中配置 vue-loader、VueLoaderPlugin 以及 Vue 相关的 define 标志。Vue 项目中的 JSX 与 TSX 页面会通过 vue/jsx-runtime 编译。
开发期行为
当 Extension.js 检测到 Vue 时，它会：- 在框架插件中启用
.vue编译。 - 应用 Vue 运行时别名（保持运行时解析一致）。
- 支持 content script 在相关 Vue SFC 变更后重新挂载的更新方式。
排查
- Vue 工具缺失警告： 安装
vue-loader与@vue/compiler-sfc。 - 安装后提示重启： 停止并重新运行
extension dev，让 Extension.js 加载新安装的 loader/plugin。 - 意外的
.vue处理问题： 确认vue出现在项目依赖中，以便 Extension.js 启用 Vue 集成。
用法示例
在新标签页扩展中
要在新标签页扩展中使用 Vue，把入口文件引入 HTML：在 content_script 文件中
对于 content script，把 Vue 应用挂载到注入的根节点上：
最佳实践
- 让 UI 入口保持框架优先（
main.ts、App.vue），把扩展 API 放在专用模块里。 - 尽量在 SFC 中使用 scoped 样式，减少扩展页面里的样式泄漏。
- 对于大型 UI，拆分组件并抽取共享的 composable，让 content script 保持精简。
运行时构建与 Options API
从 4.1.19 开始，Vue 项目打包的是仅含运行时的构建vue.runtime.esm-bundler.js，也就是 vue 包在 module 入口里指定的文件。Extension.js 会把 vue$、@vue/runtime-dom、@vue/runtime-core 和 @vue/shared 都别名到那个构建，这样你的应用和任何被转译的工作区依赖共用同一个 Vue 实例。完整构建带有模板编译器，扩展的 CSP 无法运行它，而且它的 innerHTML 和 Function 调用会通不过 addons.mozilla.org 的商店检查。
运行时构建没有模板编译器，所以模板必须预先编译。单文件组件正好提供这一点：vue-loader 在构建时编译每一个 <template>。DOM 内模板和字符串形式的 template: 选项不受支持。Vue 会在控制台里发出警告，并且对这样的组件不渲染任何内容。
要保留运行时编译，请在 extension.config.js 中把 vue$ 别名到完整构建：
extension.config.js
new Function 编译模板，这需要扩展 CSP 里有 unsafe-eval。Manifest V3 的扩展页面禁止它，所以这个别名只对 Manifest V2 项目有帮助。
Options API 在生产环境保持开启。Extension.js 在每种模式下都把 __VUE_OPTIONS_API__ 设为 true，所以用 data()、methods 或 computed 写的组件在发布的 bundle 里照常工作。__VUE_PROD_DEVTOOLS__ 和 hydration 不匹配的详情在生产环境是关闭的。
还有一条 define 适用于每一个 bundle、每一种框架。自由标识符 global 被定义为 globalThis，Rspack 自己的 global 辅助代码被关闭。那段辅助代码会回退到 Function("return this")，通不过 addons.mozilla.org 的商店检查，所以你的 bundle 里不会出现这样的 shim。
下一步
- 进一步了解 TypeScript 支持。
- 探索 Sass 和 Sass 模块。