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,百度说是更改这个会去输出兼容浏览器,尝试没啥作用,先配置吧
  }
 ....
})

  1. 在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('转换耗时');
  1. package.json命令改为:
"build": "vite build && node toFile.mjs",

npm run build 之后打开index.html文件:

Vite打包后直接使用浏览器打开,显示空白问题_第1张图片

你可能感兴趣的:(webpack,javascript,前端,vite)