用 vue 写一个 npm 包，但是打包后内部的异步组件会报错

Question

直接引入打包后使用正常

import ToolBar from '../components/ToolBar'
import Column from '../components/Column'
export default {
    components: {
        ToolBar,
        Column
    }
}

异步引入报错

export default {
    components: {
        ToolBar: () => import('../components/ToolBar'),
        Column: () => import('../components/Column')
    }
}

报错信息如下图

应该是路径不对。
我打包的配置是

// package.json
{
    "main": "dist/simple-m-editor.common.js",
    "scripts": {
        "build-bundle": "vue-cli-service build --target lib --name simple-m-editor ./src/index.js"
    }
}

vue.config.js

publicPath: './'

Answer 1

我也遇到这个问题

问题原因

npm包使用异步加载组件，跟在vue里面使用异步组件一样，生成多个文件，而在项目使用使用时会去根目录请求异步组件的文件，npm包的文件在node_modules里，所以在根目录下肯定是找不到的

如何解决

如果你是vue-cli3搭建的项目，可以将npm包的lib文件夹下的文件，复制到项目的public文件夹下，暂时可以解决

暂时不知道是否有更好的解决方案