通过Nuxt 3 Server目录提供Nuxt组件为Web Component及Vue未定义问题

问题根源 #

你当前的实现没有将Vue运行时打包进Web Component的脚本中，外部应用环境不存在全局Vue对象，所以会抛出该错误。Vue的defineCustomElement需要依赖Vue运行时才能工作，必须把组件和Vue运行时一起打包成自包含的独立脚本。

具体解决方案 #

1. 配置Vite打包独立的Web Component脚本 #

创建单独的Vite配置文件（比如vite.web-component.config.ts），专门用于打包Web Component：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue({
    // 开启自定义元素模式
    customElement: true
  })],
  build: {
    // 打包成自包含的IIFE格式，无需外部依赖
    lib: {
      entry: './src/web-component-entry.ts', // 你的Web Component入口文件
      name: 'HeaderComponent',
      formats: ['iife'],
      fileName: () => 'header-component.js'
    },
    rollupOptions: {
      // 确保所有依赖（包括Vue）都被打包进去
      external: [],
      output: {
        inlineDynamicImports: true
      }
    }
  }
})

对应的入口文件src/web-component-entry.ts保持你的逻辑：

import { defineCustomElement } from 'vue';
import TheHeader from '../components/TheHeader.vue';

const HeaderElement = defineCustomElement(TheHeader);
customElements.define('header-component', HeaderElement);

然后添加打包命令到package.json：

{
  "scripts": {
    "build:wc": "vite build --config vite.web-component.config.ts"
  }
}

执行npm run build:wc后，会在dist目录生成header-component.js，这个文件包含了Vue运行时和你的组件代码，可直接在外部环境运行。

2. 修改Nuxt Server API返回打包后的脚本 #

在server/api/header-component.ts中，读取打包好的脚本文件并返回：

import { defineEventHandler } from 'h3'
import fs from 'fs'
import path from 'path'

export default defineEventHandler(() => {
  // 构建后的脚本路径，根据实际打包位置调整
  const filePath = path.resolve(process.cwd(), 'dist/header-component.js')
  const scriptContent = fs.readFileSync(filePath, 'utf-8')
  
  // 设置响应头为JavaScript类型
  return new Response(scriptContent, {
    headers: {
      'Content-Type': 'application/javascript'
    }
  })
})

3. 验证外部应用加载 #

外部应用的加载代码无需修改，直接请求http://localhost:3000/api/header-component即可，此时脚本包含了所有依赖，不会再出现“vue is not defined”的错误。

额外注意事项 #

• 确保打包后的脚本路径正确，Nuxt运行时能访问到该文件
• 如果组件有样式，Vite会自动将样式内联到自定义元素中，无需额外处理
• 开发阶段可以用Vite的dev命令单独调试Web Component，再集成到Nuxt API中

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