type
Post
status
Published
date
Jan 5, 2023
slug
2023010501
summary
开发打印模板设计器时,浏览器ChunkLoadError: Loading chunk xx failed.报错或者SyntaxError: Unexpected character '<'报错的解决思路
tags
开发
Vue
category
学习思考
icon
password

问题的出现

年前我开发了一个小工程:打印模板设计器,开发过程中其实遇到了很多问题,我想现在可以有一点时间记录一些问题,供以后参考。
问题是在我已经发包以后出现的,因为我要在父工程引入我这个打印模板设计器,因此需要按照lib库的形式,也就是npm包引进父工程,接着问题就出现了:当我打开父工程页面的时候,我发现左侧的面板里都是空白的(下图框选部分),按常理来说是有组件内容的!
notion image
接着打开控制台,就发现如下报错:SyntaxError: Unexpected character '<' 跟断点发现是找不到一个chunk文件的位置,import的时候就报错了。如果这个路径不存在,就会重定向到/,所以报了这个错。
于是我到网络上寻求帮助,最后发现这篇文章:
按照博主的解释,
因为使用了懒加载, webpack编译时, 转译分包引用路径为 “基于网页根目录”, 而我们目标是 node_modules/<projectName>/lib/ 下的分包. 所以, 我们在网页根目录的js目录下自然找不到对应懒加载分包.
最后按照博主的解决方法,我选择合并分包,也就是在 vue.config.js 中进行如下配置:
module.exports = defineConfig({ configureWebpack: { plugins: [ new webpack.optimize.LimitChunkCountPlugin({ // 限制只打一个包,不分Chunk maxChunks: 1 }) ] } })
然后发包测试,问题解决!

扩展阅读

CSS @media 优先级问题解决浏览器端 globalThis is not defined 报错