适用前提:

仅适用引用lib库出现的问题.
不适用route路由出现的问题(思路可以参考, 但是解决方案不同)

报错原理:

因为使用了懒加载, webpack编译时, 转译分包引用路径为 “基于网页根目录”, 而我们目标是 node_modules/<projectName>/lib/ 下的分包.
所以, 我们在网页根目录的js目录下自然找不到对应懒加载分包.

对应速查术语和关键词:

lazyCompoents
vue-cli-service build --target lib
xxx.umd.min.js

解决思路介绍:

第一种: 使用分包时, 转移至 网页根目录的js目录下(http://host/js/xxx.js)
第二种: 合并分包为唯一主包
第三种: 代码内不使用懒加载

解决方案:

第一种: 使用分包时, 转移至 网页根目录的js目录下(http://host/js/xxx.js)

使用CopyWebpackPlugin插件, 当网页访问指定文件时, 复制对应文件至指定目录

// vue.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
  configureWebpack: {
    plugins: [new CopyWebpackPlugin([
      {
        context: 'node_modules/admin-crud/lib/', // 作用域   注意: admin-crud/lib 要改成你的
        from: '*.umd.min.*.js',  // 检测的文件
        to: 'js/',  // 复制的目的地
        toType: 'dir' // 目的地类型
      }
    ])]
  }
}

缺点: 需写在主项目的vue.config.js中
优点: 真正的懒加载

第二种: 合并分包为唯一主包

使用webpack限制只能生成一个包

//vue.config.js
const webpack = require('webpack')

module.exports = {
   configureWebpack: {
     plugins: [
       new webpack.optimize.LimitChunkCountPlugin({
         maxChunks: 1  // 限制只打一个包，不分Chunk
       })
     ]
   }
}

缺点: 都只生成一个包了, 这是假的懒加载.
优点: 写在npm项目的vue.config.js中

第三种: 代码内不使用懒加载

优点: 简单
缺点: 大