vite打包vue3-遇到的问题记录
起因是 公司的h5是用 vue3+ vite进行开发的，使用Cordova集成到android里（相当于集成在webview里）。调试了半天，发现手机 装了应用，一直白屏，debug发现文件路径不对，改来改去，后来解决了，特此记录
参考文章： vite打包vue3后如何直接在浏览器打开（非ESModule）
上述这篇很好，参考了这篇解决了问题，不过我还遇到了其他问题。。
问题1： 打包后，直接点击index.html 显示空白问题
- vite.config.js配置, 如果是打包时，base值变为./, 没有这个属性，则配上
base: './'
这样做还不显示，原因如下：
image.png
所以我们需要全局安装一个http-server或者live-server ,这里我用的是：
npm install live-server -g
安装好后，在打包默认的路径dist下进行访问，输入命令 live-server 浏览器会新打开一个页面，即是最终打包后要预览的页面
问题2：打包后的vue dist, 集成在android里，页面空白怎么办？
就我的白屏问题而言，是加载文件 加载不出来。如何操作：
- 安装 @vitejs/plugin-legacy
@vitejs/plugin-legacy地址
注意！！！
01ED9ED7.gif
特别关注你的vite版本，再安装对应的 @vitejs/plugin-legacy 版本（最新的是2.0.0版本，需要 vite 3.0.0 支持）
我这里 项目vite版本是 2.9.9， 之前尝试升到3.0.0， 并安装 @vitejs/plugin-legacy 2.0.0版本的，报错好多问题，无法解决。故 最终降低了@vitejs/plugin-legacy版本。 锁定版本如下：
项目中package.json：
"vite": "^2.9.9"
"terser": "^5.14.2",
"@vitejs/plugin-legacy": "^1.8.2",
注： 查看vitejs/plugin-legacy历史版本可以访问 ： vitejs/plugin-legacy的历史版本
- 配置@vitejs/plugin-legacy相关内容
在根目录找到vite.config.ts(js)，并做如下修改
import legacy from '@vitejs/plugin-legacy';
plugins: [
legacy({
targets: ['defaults', 'not IE 11']
}),
vue()
],
- 执行打包
-
修改打包后的文件
image.png
参考我最终的index.html实现：
image.png
- 此时点击dist/index.html ，发现可以在浏览器正常预览内容了，再将最终的dist 文件集成到android 里，成功！
image.png
后续优化
程序员怎么会做重复而又麻烦的事情呢，如果每次打包后，都要手动更新，费手指和时间，该咋办呢？是时候拿出我的优化大法了！
01EBF56F.gif
解决思路：
- 可以修改dist里的index.html的内容（按照上述步骤说的，进行部分内容的剔除）
- 修改后的index.html内容运行成功，跟我们手动修改的一致
武器： node、node-html-parser 包、自定义执行的js文件（实现我们上述所说功能）
step1: node肯定都有，项目里安装node-html-parser
npm install --save node-html-parser
step2: 项目根目录下，新建自定义执行的js文件： handleDist.js
image.png
书写内容(里面注释 写的较清楚。。)：
//引入路径模块
const path = require("path");
//引入文件模块
const fs = require("fs");
const parse = require('node-html-parser').parse;
let pathName = path.join(__dirname, "dist/index.html")
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')
if(hasNoModule) {
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', srcData)
legacyEle.removeAttribute('data-src')
legacyEle.innerText = ''
}
}
// 将新的组合的内容写入原有index.html
fs.writeFileSync(pathName, root.toString())
// console.log('222'+root.toString())
})
step3: 在项目根目录下，node运行此js文件
node .\handleDist.js
image.png
step4: 运行结束后，查看dist里的index.html ,发现跟我们手动修改是一样的。
再次手动双击index.html，发现效果也是一样，可以在浏览器里直接显示出界面
01F5E4AD.jpg
优化成功！（不会告诉你俺费了2个小时，由于node不咋会。。）
