如何配置Nuxt将组件打包为单个JS文件？

你当前的monorepo拆分思路是对的，但可以进一步优化为在同一个组件包内同时输出两种产物：一种供Nuxt应用通过模块自动导入使用，另一种打包为单个widget.js供外部网页直接调用，避免维护多份配置和代码。

具体实现步骤 #

1. 调整组件包的结构与入口 #

在你的组件包根目录下，创建src/components/index.ts作为统一导出入口，同时支持Nuxt模块和Widget场景：

// 导出所有组件（供Nuxt自动导入）
import DTButton from './DTButton.vue'
import DTModal from './DTModal.vue'

export { DTButton, DTModal }

// Widget安装函数（供外部网页Vue实例调用）
export function install(app) {
  app.component('DTButton', DTButton)
  app.component('DTModal', DTModal)
}

// 自动适配全局Vue环境（如果外部网页已引入Vue）
if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.use(install)
}

2. 配置Vite同时输出双产物 #

修改组件包的vite.config.ts，配置Rollup同时生成ESM格式（供Nuxt模块）和UMD格式（单个widget.js）：

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

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: resolve(__dirname, 'src/components/index.ts'),
      name: 'DTWidget', // 外部网页全局变量名（window.DTWidget）
      formats: ['es', 'umd'], // 同时输出ESM和UMD
      fileName: (format) => format === 'umd' ? 'widget.js' : 'esm/index.mjs'
    },
    rollupOptions: {
      // 可选：如果外部网页会自行引入Vue，就排除Vue依赖；否则删除此行将Vue打包进widget
      external: ['vue'],
      output: {
        // 映射外部依赖的全局变量
        globals: {
          vue: 'Vue'
        },
        // 强制UMD产物为单个文件
        manualChunks: undefined,
        entryFileNames: 'widget.js'
      }
    }
  }
})

3. 优化Nuxt模块配置 #

更新你的Nuxt模块代码，使用ESM兼容的路径写法（替代__dirname），同时添加类型支持：

import { defineNuxtModule } from '@nuxt/kit'
import { fileURLToPath } from 'node:url'
import { join } from 'pathe'

export default defineNuxtModule({
  setup(_, nuxt) {
    // 注册组件目录，供Nuxt自动导入
    nuxt.hook('components:dirs', (dirs) => {
      dirs.push({
        path: join(fileURLToPath(import.meta.url), '../src/components'),
        prefix: 'dt'
      })
    })
    // 自动导入组件类型（可选）
    nuxt.hook('prepare:types', (options) => {
      options.references.push({ path: '@your-org/widget-components' })
    })
  }
})

4. 配置组件包的package.json #

确保package.json的入口配置正确，让Nuxt和外部工具能正确识别产物：

{
  "name": "@your-org/widget-components",
  "type": "module",
  "main": "./dist/widget.js", // UMD产物（供外部网页）
  "module": "./dist/esm/index.mjs", // ESM产物（供Nuxt）
  "exports": {
    ".": "./dist/esm/index.mjs",
    "./widget": "./dist/widget.js"
  },
  "peerDependencies": {
    "vue": "^3.0.0"
  }
}

两种场景的使用方式 #

Nuxt应用内使用 #

直接在Nuxt项目的nuxt.config.ts中引入你的模块即可，组件会自动导入：

export default defineNuxtConfig({
  modules: ['@your-org/widget-components']
})

然后在页面/组件中直接使用：

<template>
  <dt-button>Nuxt内使用组件</dt-button>
</template>

外部网页使用 #

直接引入widget.js即可，无需构建工具：

<!-- 可选：如果widget未打包Vue，先引入Vue -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- 引入你的widget -->
<script src="https://cdn.example.com/widget.js"></script>

<div id="app">
  <dt-button>外部网页使用组件</dt-button>
</div>

<script>
  // 初始化Vue并注册组件
  const app = Vue.createApp({})
  app.use(DTWidget)
  app.mount('#app')
</script>

方案优势 #

• 单包维护：组件代码只需要写一次，无需在多个包之间同步
• 灵活适配：同时支持Nuxt的自动导入和外部网页的原生JS调用
• 可配置性：通过external选项控制是否将Vue打包进widget，适配不同外部环境
• 规范兼容：符合现代前端包的ESM/UMD规范，适配多种工具链

内容的提问来源于stack exchange，提问作者Branislav Popadič