vite+vue3开发的移动端项目，安卓白屏怎么办？

为什么会出现这个情况，因为低版本的安卓浏览器不支持 ESM的方式 比方说

js
<script type="module" crossorigin src="/assets/index-2a0504af.js"></script>

type=module(/ˈmɑːdʒuːl/音标)注意单词发音，这个方式在安卓8以下的手机或者是ios10.x以下的机型（iphone6s，一代神机，现在还有好多人用）是不行的 那么我们就需要通过一系列的方法删除他，而且让他能用，幸亏vite官方提供了这么一个插件 vite/packages/plugin-legacy at main · vitejs/vite · GitHub，但是还是需要我们自己再改一些东西，接下来上代码

js
export const cleanDist = () => {  
const pathName = path.resolve(process.cwd(), `${OUTPUT_DIR}/index.html`);  
  
try {  
const html = fs.readFileSync(pathName, 'utf-8');  
const root = parse(html);  
const elList = root.querySelectorAll('script');  
  
for (let i = 0; i < elList.length; i++) {  
// 1、移除 <script type=module> 元素  
const data = elList[i].getAttribute('type');  
if (data && data === 'module') {  
elList[i].remove();  
}  
  
// 2、移除其他 <script> 的 nomodule 属性  
const hasNoModule = elList[i].hasAttribute('nomodule');  
const hascrossorigin = elList[i].hasAttribute('crossorigin');  
if (hasNoModule) {  
if (hascrossorigin) {  
elList[i].removeAttribute('crossorigin');  
}  
elList[i].removeAttribute('nomodule');  
}  
  
// 3、移除 <script id=vite-legacy-entry> 元素的内容，并把 data-src 属性名改为 src  
const hasDataSrc = elList[i].hasAttribute('data-src');  
if (hasDataSrc) {  
const legacyEle = elList[i];  
const srcData = legacyEle.getAttribute('data-src');  
legacyEle.setAttribute('src', typeof srcData === 'string' ? srcData : '');  
legacyEle.removeAttribute('data-src');  
legacyEle.textContent = '';  
}  
}  
// 将新的组合的内容写入原有index.html  
fs.writeFileSync(pathName, root.toString());  
// console.log('222'+root.toString())  
} catch (err) {  
console.log('读取index.html文件失败' + JSON.stringify(err));  
}  
  
// fs.readFile(pathName, 'utf8', function (err, html) {  
// if (err) {  
// return console.log('读取index.html文件失败' + err.message);  
// }  
// const root = parse(html);  
// const elList = root.querySelectorAll('script');  
//  
// for (let i = 0; i < elList.length; i++) {  
// // 1、移除 <script type=module> 元素  
// const data = elList[i].getAttribute('type');  
// if (data && data === 'module') {  
// elList[i].remove();  
// }  
//  
// // 2、移除其他 <script> 的 nomodule 属性  
// const hasNoModule = elList[i].hasAttribute('nomodule');  
// const hascrossorigin = elList[i].hasAttribute('crossorigin');  
// if (hasNoModule) {  
// if (hascrossorigin) {  
// elList[i].removeAttribute('crossorigin');  
// }  
// elList[i].removeAttribute('nomodule');  
// }  
//  
// // 3、移除 <script id=vite-legacy-entry> 元素的内容，并把 data-src 属性名改为 src  
// const hasDataSrc = elList[i].hasAttribute('data-src');  
// if (hasDataSrc) {  
// const legacyEle = elList[i];  
// const srcData = legacyEle.getAttribute('data-src');  
// legacyEle.setAttribute('src', typeof srcData === 'string' ? srcData : '');  
// legacyEle.removeAttribute('data-src');  
// legacyEle.textContent = '';  
// }  
// }  
// // 将新的组合的内容写入原有index.html  
// fs.writeFileSync(pathName, root.toString());  
// // console.log('222'+root.toString())  
// });  
};

有个坑，这里边有个读取文件的工作，fs.readFileSync，可以看到我下边注释的这个代码。这个功能本来是等vite打包完毕之后再去删除index.html的相关内容，但是我的项目里边还添加了打包完毕之后自动把打包后的代码打包成zip文件，也就是dist文件这就导致，我异步删除的时候我的dist已经被打包成zip了。这需要注意一下读取文件采用同步的方式 具体代码可以查看 badlym/van-view-template (github.com)