我如何在NPM链接的Nuxt插件中引用Vue组件？

Question

我有一个自定义的Nuxt模块，该模块是NPM链接的，并像这样添加了一个插件：

import path from 'path'

export default function (moduleOptions) {
  this.addPlugin(path.resolve(__dirname, 'plugin.js'))
}

这很好，然后插件会导入一个相对的Vue组件并像这样添加到路由器中：

import ProductListing from './components/ProductListing.vue'

export default ({ app }, inject) => {
  app.router.addRoutes([
    {
      path: '/products',
      name: 'products',
      component: ProductListing,
      meta: {
        permissions: ['manage_catalogue']
      }
    }
  ])
}

当我运行npm run dev时出现错误：

This relative module was not found:                                                                                       friendly-errors 16:48:40
                                                                                                                          friendly-errors 16:48:40
* ./components/ProductListing.vue in ./.nuxt/src.plugin.2237471c.js

这是有道理的，因为它正在尝试在与.nuxt文件夹的关系中找到它，但是我无法弄清楚我是如何得到它来解析组件的？如果我将模块/插件移到Nuxt项目的modules文件夹中，就可以了。

我尝试过的

尝试添加webpack配置无法解析符号链接

    extend (config, { isDev, isClient }) {
      Object.assign(config.resolve, {
        symlinks: false
      })
    }

我已经尝试将模块添加到可转换生成选项中，如下所示：

  build: {
    transpile: [
      '@symlinked/module'
    ]
  }

我已经尝试使用webpack和vue loader将模块编译为commonjs，这只会给模板带来完全不同的错误。

---

此时，我有点不知所措，希望有人遇到类似的情况并克服它。谢谢！

Answer 1

为了在插件中使用ProductListing并将其导入，必须在模块中添加PluginListings.vue作为模板。添加文件作为模板对nuxt说，您必须将此文件复制到.nuxt目录

import path from 'path'

export default function (moduleOptions) {
  // add ProductListing as template
  this.addTemplate(path.resolve(__dirname, 'ProductListing.vue'))

  // register plugin
  this.addPlugin(path.resolve(__dirname, 'plugin.js'))
}