vue.js Nuxt -从通用组件项目中使用时无法解析依赖关系

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

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

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

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

我用来捆绑组件项目的rollup.js.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.js.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项目，但仅使用依赖项。因此，我不能像这个问题中那样显式地导入一个组件？

Cannot explicitly import nuxt components

我发现这可以通过使用nuxt模块来实现。按照以下说明创建nuxt模块项目：
Creating a nuxt module project
在项目中添加了一个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-components

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

组件项目的依赖性在本地被其他项目需要。在<path_to_component_project>其他项目中使用npm install来添加此依赖项。
在主项目的nuxt.config.ts文件中，导入组件并在模块中注册为：

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

vue.js Nuxt -从通用组件项目中使用时无法解析依赖关系

1条答案

相关问题

热门标签

最新问答