记录下解决问题的过程和思路
首先打开看打包后的 dist/index.html 文件,和页面上的报错
这里就发现了第一个问题
报错的意思是 index.html中引用的 css文件 和 js文件 找不到
为了解决这个问题,在vite.config.js配置中,增加一项 base:'./' 让文件指向正确的路径
这个问题在webpage上也存在,道理是一样的,我本来以为这问题到这就解决了
但配置了base后重新打包,页面还是空白,但报错变了,说明刚刚的配置,起了一定作用
网上有说配置路由为history模式的,各位也可以试试,但我这次遇到的问题,和路由没关系
此时看打包后的 dist/index.html 文件、页面上的报错和报错的js文件
报错中说,浏览器它不理解这个'?'的意思,
我打开报错的JS文件,发现了第二个问题
这个js文件其中一行写了两个问号??,这个是ES2020的新语法,例如:a ?? b
意思是当a的值是undefined或者null 的时候,就返回b
我猜测这个es2020标准,我测试用的这两款浏览器都不认
- mac arm chrome 版本 115.0.5790.170(正式版本) (arm64)
- 360 极速 内核版本78.0.3904.108
此时解决问题的思路有了,查阅vite官方文档,寻找构建配置的兼容性目标,
我决定将目标限制在ES2015
就增加了这个配置,问题完美解决
另外,其实还有个更粗暴的办法
适用于小项目:就是直接配置minify: false ,什么都解决了,这个vite的官方文档里也有提到
这样带来的缺点就是,打包后的文件体积没有压缩到最小
但小项目就无所谓了,也不差那三五MB的