Question

我正在尝试在另一个项目中重复使用一个项目中的Nuxt.js组件。因此，我创建了一个新项目，该项目将导入所需的组件，然后将其导出为npm软件包。

npm软件包（main.js）

import SomeComponent from '../foobar/SomeComponent.vue'

export default {
   install (Vue) {
      Vue.component(SomeComponent)
   }
}

export {
   SomeComponent
}

npm软件包（webpack.config.js）

module.exports = {
  entry: path.resolve(__dirname + '/src/main.js'),
  output: {
    path: path.resolve(__dirname + '/dist/'),
    chunkFilename: '[name].build.js',
    filename: 'build.js',
    libraryTarget: 'umd',
    libraryExport: 'default',
    library: 'MyLibrary',
    umdNamedDefine: true
  }
}

然后在新的Nuxt.js项目中，我可以简单地导入npm软件包，组件将自动安装。虽然在不使用任何代码拆分功能时这种方法很好用，但是在尝试在SomeComponent.vue文件中使用动态导入时，它将引发错误。

当在import(/* webpackChunkName: "mapbox" */ 'mapbox-gl')这样的组件中添加动态导入时，将创建块，但是在开发模式下运行Nuxt时，总是出现错误：

未捕获（承诺）ChunkLoadError：加载块1失败。

Nuxt找不到创建的块文件。我试着玩publicPath，但我不知道Nuxt能够访问它们的正确路径是什么？

如何使用Nuxt导入的动态导入创建库？

0 个答案: