Nuxt - 从公共组件项目使用时无法解决依赖关系

Question

我有一个 Nuxt 项目（我们称之为主项目），它使用我开发的自定义组件库（我们称之为组件项目）。该组件项目具有 nuxt 依赖项，我在其中使用 NuxtLink 组件。我构建组件项目并在 package.json 的主项目中将其引用为：

"dependencies": { "wt-login": "file:../../../../ws-wtvue/components/wt-login" }

当我运行主项目时，我在浏览器中收到警告：

[Vue warn]：无法解析组件：NuxtLink

我的 rollup.config.js 用于捆绑组件项目，如下所示：

import vue from 'rollup-plugin-vue'
import styles from 'rollup-plugin-styles'
import peerDepsExternal from 'rollup-plugin-peer-deps-external'

export default [
  {
    input: 'src/index.js',
    output: [
      {
        format: 'esm',
        file: 'dist/wtlogin.mjs'
      },
      {
        format: 'cjs',
        file: 'dist/wtlogin.js'
      }
    ],
    plugins: [
      vue(), peerDepsExternal(), styles()
    ]
  }
]

组件项目的 package.json 如下所示：

{
  "name": "wt-login",
  "version": "1.0.0",
  "description": "",
  "type": "module",
  "main": "dist/wtlogin.js",
  "module": "dist/wtlogin.mjs",
  "files": [
    "dist/*"
  ],
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "rollup -c"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@nuxt/devtools": "latest",
    "@types/node": "^18.17.3",
    "nuxt": "^3.6.5"
  },
  "dependencies": {
    "nuxt": "^3.6.5",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-styles": "^4.0.0",
    "rollup-plugin-vue": "^6.0.0",
    "wt-commonjs": "file:../../plugins/wt-commonjs"
  }
}

主项目的package.json：

{
  "name": "nuxt-app",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxt/devtools": "latest",
    "@types/node": "^18.17.3",
    "nuxt": "^3.6.5",
    "typescript": "^5.2.2",
    "wt-login": "file:../../../../ws-wtvue/components/wt-login"
  },
  "dependencies": {
    "primeflex": "^3.3.1",
    "primeicons": "^6.0.1",
    "primevue": "^3.34.1",
    "vue-uuid": "^3.0.0",
    "wt-login": "file:../../../../ws-wtvue/components/wt-login"
  }
}

主项目的nuxt.config.js

export default defineNuxtConfig({
  app: {
    head: {
      title: 'Title'
    }
  },
  css: [
    '~/assets/css/main.css',
    'primevue/resources/themes/saga-blue/theme.css',
    'primevue/resources/primevue.css',
    'primeicons/primeicons.css',
    'primeflex/primeflex.css'
  ],
  build: {
    transpile: ['primevue']
  },
  devtools: { enabled: true }
})

我缺少什么配置？为什么主工程（或组件工程）找不到组件工程的NuxtLink组件？

[编辑] 我怀疑这（下面的链接）可能是组件项目中的问题。该项目我们没有初始化为 nuxt 项目，而仅使用依赖项。因此，我无法像本期那样显式导入组件？

无法显式导入 nuxt 组件

Answer 1

我发现这可以通过使用 nuxt 模块来实现。按照以下说明创建 nuxt 模块项目：

创建nuxt模块项目

在项目中添加了一个 src/modules.ts 文件，如下所示：

import { defineNuxtModule, createResolver, addComponent } from '@nuxt/kit'

export default defineNuxtModule({
    meta: {
        name: '@wt/wtlogin',
        configKey: 'wtlogin',
        compatibility: {
          nuxt: '^3.8.0'
        }
    },
    async setup (options, nuxt) {
        const resolver = createResolver(import.meta.url)
        addComponent({
            name: 'WtLogin',
            filePath: resolver.resolve('./runtime/components/WtLogin.vue')
        });
    }
});

在同一组件项目中添加 src/index.ts 文件：

export { default } from './module'

创建一个文件夹 src/runtime/components 并将您的 vue 组件放在这里。我想在我的自定义组件中使用像 NuxtLink 这样的 nuxt 组件

<template>
  <NuxtLink>Some link to test !!</NuxtLink>
</template>

组件项目的依赖被其他项目本地需要。在其他项目中使用 npm install 添加此依赖项。

在主项目的 nuxt.config.ts 文件中，导入组件并在模块中注册为：

export default defineNuxtConfig({
  app: {
    ...
  },
  css: [
    ...
  ],
  build: {
    ...
  },
  modules: [
    WtLogin
  ]
})