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、移除