首页 前端知识 Vite项目打包后打开html后页面空白并报错Access to script at ‘file:///G:/ceshi/装备/charts-vue/Ec

Vite项目打包后打开html后页面空白并报错Access to script at ‘file:///G:/ceshi/装备/charts-vue/Ec

2024-04-20 16:04:10 前端知识 前端哥 534 822 我要收藏

一.问题:

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

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

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

三.解决方法:

1.安装 @vitejs/plugin-legacyterser

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 动态加载或者在其他地方引入。页面的展示和功能依赖于模块资源的正确加载和执行,而不一定依赖于预加载标签的存在。 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/5419.html
标签
评论
发布的文章

用js生成小米商城

2024-04-27 21:04:59

网页汇率计算器vue代码

2024-04-26 13:04:44

Python读写Json文件

2024-04-23 22:04:19

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!