解决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文件:
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
ResizeObserver loop limit exceeded报错原因及解决方案
这篇文章主要给大家介绍了关于ResizeObserver loop limit exceeded报错原因及解决的相关资料,公司项目监听系统中发现一个高频错误ResizeObserver loop limit exceeded,而浏览器的console中却没有提示,需要的朋友可以参考下2023-09-09vue3响应式Proxy与Reflect的理解及基本使用实例详解
这篇文章主要为大家介绍了vue3响应式Proxy与Reflect的理解及基本使用实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-08-08
最新评论