Vue.js 3 + Vite 项目在安卓App中内嵌展示方案

双击Vite打包后的index.html文件直接在浏览器中打开

最近需要实现一个功能：改造现有 Vue 3 项目，使打包后的项目文件能够直接内嵌在安卓APP（大屏）中使用，即在安卓应用中使用 WebView 通过webView.loadUrl("file:///android_asset/index.html")的方式加载 Vite 打包后的 index.html 文件。

目前，项目使用的部分技术栈如下：

Vue.js 3.2.47
Vue Router 4.1.6
Pinia 2.0.32
element-plus 2.3.3
Vite 4.1.4

为了实现这个功能，笔者查找资料后，发现目前可行的两套方案：

方案一：使用 vite-plugin-singlefile 将整个项目打包到一个 HTML 文件中；
方案二：使用 @vitejs/plugin-legacy 插件使打包后的文件兼容老版的浏览器；

经过一番尝试后，两种方案也确实都是可行的，都可以直接双击打包后生成的 index.html 文件在浏览器中成功运行和展示。

两种方案比较：

因为方案一将所有的东西统统放在一个 HTML 文件中，这样会造成打包生成的 index.html 文件非常大（笔者的项目打包后生成的 index.html 文件大小为93M ），在浏览器中打开，初次加载时容易出现卡、慢的情况。鉴于此，笔者选择了方案二：使用 @vitejs/plugin-legacy 插件使打包。

下面我们来简单介绍下 @vitejs/plugin-legacy 及其使用步骤。

@vitejs/plugin-legacy简介

plugin-legacy 是 Vite 团队开发的一款插件，用于确保使用 Vite 构建的前端项目能够在旧版本的浏览器上正常运行。

当使用 Vite 构建前端项目时，默认支持的浏览器特性包括原生ESM 、原生ESM的动态导入，以及 import.meta 。但是旧版本的浏览器并不支持这些特性。plugin-legacy 插件就是在构建生产版本时，为不支持这些特性的旧版浏览器提供必要的支持。

@vitejs/plugin-legacy使用步骤

1、安装插件

因为 plugin-legacy 使用 Terser 进行代码压缩，所以在安装 plugin-legacy 插件之前，我们需要先安装 Terser 。

这里我们选择安装最新版本的 Terser：

css 复制代码

 $ npm i terser -D

安装完 Terser 后我们再来安装 plugin-legacy。安装最新版本的 plugin-legacy 使用如下命令：

css 复制代码

 $ npm i @vitejs/plugin-legacy terser -D

安装成功之后，笔者发现最新版本的 plugin-legacy 与项目中的其它包存在版本冲突，所以笔者改为使用如下命令安装特定版本的 plugin-legacy ：

ruby 复制代码

 # 安装特定版本
 $ npm i @vitejs/[email protected] terser -D

2、配置

在 Vite 配置文件中（通常是 vite.config.js ）引入并使用插件：

1、引入 plugin-legacy

javascript 复制代码

 // 引入 plugin-legacy
 import legacy from '@vitejs/plugin-legacy'

2、配置 plugin-legacy

arduino 复制代码

 export default defineConfig({
   plugins: [
     // 其它插件：略
     legacy({
       targets: ['defaults', 'not IE 11']
     })
   ],
 })

其中 targets 选项用于指定要支持的浏览器。

3、打包项目

最后，我们在项目根目录下使用如下命令打包项目：

arduino 复制代码

 $ npm run build

打包成功后生成的 dist 文件夹内容如下图：

与我们没有添加 plugin-legacy 插件之前打包后生成的目录结构没有什么差别，index.html文件的大小也就 2KB 。

我们直接双击index.html文件，发现是可以直接在浏览器中运行的，浏览器控制台也没有报告，页面跳转也没有错。现在我们就可以将 dist 文件夹发给安卓工程师，至此需求解决😄。