适用前提:
仅适用引用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中
第三种: 代码内不使用懒加载
优点: 简单
缺点: 大
