双击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/plugin-legacy@4.1.1 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 文件夹发给安卓工程师,至此需求解决😄。