时间戳

首页 > 解决方案 > 如何在 NPM 链接的 Nuxt 插件中引用 Vue 组件？

nuxt.js - 如何在 NPM 链接的 Nuxt 插件中引用 Vue 组件？

问题描述

我有一个自定义 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 文件夹的关系中找到它，但我无法弄清楚我打算如何让它来解析组件？如果我将模块/插件移动到modulesNuxt 项目的文件夹中，那很好。

我试过的

尝试添加 webpack 配置以不解析符号链接

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

我尝试将模块添加到 transpile 构建选项，如下所示：

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

我尝试使用 webpack 和 vue 加载器将模块编译为 commonjs，这只是给出了关于模板的完全不同的错误。

在这一点上，我有点不知所措，希望有人遇到过类似的情况并克服它。谢谢！

标签： nuxt.js

解决方案

为了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'))
}

推荐阅读