Vite项目打包后打开html后页面空白并报错Access to script at ‘file:///G:/ceshi/%E8%A3%85%E5%A4%87/charts-vue/Ec

一.问题：

vue3+vite项目打包过后，通过打包生成的html文件直接访问浏览器时，浏览器显示空白，并且会报错。

二.原因：vite官网是这样解释的构建产物因为 CORS 错误无法工作

也就是说vite 默认使用 ES Module 模块是不支持file协议的，所以需要使用插件来进行配置，才可以正常使用file协议打开。 

三.解决方法:

1.安装 @vitejs/plugin-legacy 和 terser

yarn add @vitejs/plugin-legacy
yarn add terser

2.在 vite.config.js 中添加配置 base:"./"

3.将路由改成哈希模式 

 

4. 最后需要把 script 标签里面的 nomodule，crossorigin 属性删掉。含有 type="module" 的标签也删掉。再data-src 属性换成 src。 

注意：

如果还有报错的话，看一下打包过后的html文件是否有大量的 link rel="modulepreload" 文件，可以尝试将这些文件注释掉

 

这些 link引入 的作用是 ：

在 HTML 文件中，<link rel="modulepreload"> 标签的作用是为了告诉浏览器在解析 HTML 和执行 JavaScript 之前预加载指定的模块资源，以提高页面加载速度和性能。

注释掉这些预加载标签并不会影响页面展示和功能的使用，因为这些模块资源仍然可以通过其他方式被加载和使用，比如通过 JavaScript 动态加载或者在其他地方引入。页面的展示和功能依赖于模块资源的正确加载和执行，而不一定依赖于预加载标签的存在。