admin管理员组文章数量:1619183
vite打包后，直接用浏览器打开显示空白
1.需求：
安卓webview等浏览器直接打开文件显示
2.原因
（1）资源路径错误：
vite.config.js 配置 base: “./” （在webpack中则配置publicPath: "./"即可）
(2) 跨域错误
script不支持file://协议跨域， 主要是因为esModule问题。
如何处理
- 安装 npm install @vitejs/plugin-legacy
- 配置 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,百度说是更改这个会去输出兼容浏览器，尝试没啥作用，先配置吧
}
....
})
- 在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('转换耗时');
- package.json命令改为：
"build": "vite build && node toFile.mjs",
npm run build 之后打开index.html文件：
版权声明：本文标题：Vite打包后直接使用浏览器打开，显示空白问题 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1728787982a1173479.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论