[vite] 项目打包后页面空白,配置了base后也不生效

记录下解决问题的过程和思路

首先打开看打包后的 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的