解决Vite打包后直接使用浏览器打开,显示空白问题
更新时间：2024年03月15日 14:09:01 作者：change_fate
这篇文章主要介绍了解决Vite打包后直接使用浏览器打开,显示空白问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
Vite打包后直接使用浏览器打开,显示空白
1.需求
安卓webview等浏览器直接打开文件显示
2.原因
（1）资源路径错误
vite.config.js 配置 base: “./” （在webpack中则配置publicPath: "./"即可）
（2）跨域错误
script不支持file://协议跨域， 主要是因为esModule问题。
如何处理
1.安装 npm install @vitejs/plugin-legacy
2.配置 vite.config.js
import legacy from '@vitejs/plugin-legacy';
export default defineConfig({
....
plugins: [legacy({
targets: ['defaults', 'not IE 11']
}),vue()],
build:{
target: ['es2015', 'chrome63'], // 默认是modules,百度说是更改这个会去输出兼容浏览器，尝试没啥作用，先配置吧
}
....
})
3.在dist并列的文件夹中创建脚本文件 (用于替换module等关键词，省的每次得手动删除)toFile.mjs
创建 toFiles.mjs (为啥格式不是js为了执行命令不报兼容的错误)
import fs from 'fs';
console.time('转换耗时');
const distPath = './dist/index.html';//打包路径的index.html
let htmlText = fs.readFileSync(distPath, 'utf8');
let resultText = '';
let htmlArr = htmlText.match(/.*\n/g) || [];
htmlArr.forEach(str => {
str = str.replace(/\s?nomodule\s?/g,' ');
str = str.replace(/\s?crossorigin\s?/g,' ');
str = str.replace(/data-src/g,'src');
if(!/type="module"/i.test(str)) resultText += str;
});
fs.writeFileSync(distPath,resultText,'utf8');
console.timeEnd('转换耗时');
4.package.json命令改为：
"build": "vite build && node toFile.mjs",
npm run build 之后打开index.html文件：
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue中的请求拦截器和响应拦截器用法及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
elementui源码学习之仿写一个el-divider组件
这篇文章主要为大家介绍了elementui源码学习之仿写一个el-divider组件示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要为大家详细介绍了springboot+vue实现文件上传下载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
这篇文章主要为大家详细介绍了Vue+thinkphp5.1+axios实现文件上传，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
这篇文章主要介绍了vue-cli3配置多项目并按项目分别实现打包方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了如何利用Vue+TS实现一个简易的语音播放组件，文中的示例代码讲解详细，对我们学习Vue有一定的帮助，需要的可以参考一下2022-03-03
这篇文章主要给大家介绍了关于vue点击右键出现自定义操作菜单实现的相关资料,在网页中我们也希望可以像桌面软件一样,点击右键后出现操作菜单,对选中的数据项进行相应的操作,需要的朋友可以参考下2023-08-08
这篇文章主要为大家详细介绍了Vue实现简单的跑马灯，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
这篇文章主要为大家详细介绍了vue实现简易的计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
这篇文章主要介绍了Vue事件符.capture的含义及用法说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
最新评论