如何将Nuxt 3构建为可嵌入外部网站的Web Component

核心思路 #

Nuxt 3默认是SSR/SSG框架，要生成独立的Web Component，需要绕过常规页面渲染逻辑，单独创建Web Component专属入口文件，再配置构建工具打包成单文件IIFE格式，确保能直接在外部网页引入运行。

步骤1：创建Web Component入口文件 #

在项目components目录下创建专属入口（比如ChatBot.ce.js），将聊天机器人组件封装为Vue自定义元素：

import { defineCustomElement } from 'vue'
// 导入你的聊天机器人组件（尽量用纯Vue API，避免依赖Nuxt专属功能）
import ChatBot from './ChatBot.vue'
// 导入组件CSS为字符串（Vite原生支持?raw后缀）
import componentStyles from './ChatBot.vue?raw'

// 封装为自定义元素
const ChatBotElement = defineCustomElement({
  // 复用组件的props、template等配置
  ...ChatBot,
  // 将CSS注入到shadow root
  styles: [componentStyles]
})

// 避免重复注册
if (!customElements.get('chat-bot')) {
  customElements.define('chat-bot', ChatBotElement)
}

export default ChatBotElement

步骤2：配置Nuxt构建规则 #

修改nuxt.config.ts，关闭SSR并配置Rollup打包规则：

import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'

export default defineNuxtConfig({
  // 强制关闭SSR，Web Component仅在客户端运行
  ssr: false,
  build: {
    // 禁止CSS拆分，确保样式合并到JS中
    cssCodeSplit: false,
    rollupOptions: {
      // 指定Web Component入口文件
      input: {
        chatbot: './components/ChatBot.ce.js'
      },
      output: {
        // 输出单文件，命名为chatbot.js
        entryFileNames: 'chatbot.js',
        // 使用IIFE格式，直接在浏览器环境运行
        format: 'iife'
      }
    }
  },
  vite: {
    // 注入CSS到JS，确保样式被打包进shadow DOM
    plugins: [cssInjectedByJsPlugin()]
  }
})

步骤3：构建并嵌入外部网站 #

执行构建命令生成单文件：

npm run build

构建完成后，.output/public目录下会生成chatbot.js。将该文件放到外部网站的静态资源目录，即可在网页中使用：

<!-- 引入Web Component脚本 -->
<script src="/path/to/chatbot.js"></script>
<!-- 使用自定义元素 -->
<chat-bot></chat-bot>

注意事项 #

• 聊天机器人组件尽量用纯Vue API，如需配置参数可通过自定义元素的props传递，避免依赖Nuxt专属API（如useRouter、useRuntimeConfig）。
• 若使用第三方UI库，需将其CSS字符串加入styles数组，确保样式被注入到shadow DOM。
• 注意跨域问题，若外部网站与资源不在同一域名，需配置CORS允许访问。

内容的提问来源于stack exchange，提问作者GBVXD