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

相关推荐
ohMyGod_12339 分钟前
React16,17,18,19新特性更新对比
前端·javascript·react.js
前端小趴菜0541 分钟前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js
@大迁世界41 分钟前
第1章 React组件开发基础
前端·javascript·react.js·前端框架·ecmascript
Hilaku1 小时前
从一个实战项目,看懂 `new DataTransfer()` 的三大妙用
前端·javascript·jquery
爱分享的程序员1 小时前
前端面试专栏-算法篇:20. 贪心算法与动态规划入门
前端·javascript·node.js
我想说一句1 小时前
事件委托与合成事件:前端性能优化的"偷懒"艺术
前端·javascript
爱泡脚的鸡腿1 小时前
Web第二次笔记
前端·javascript
良辰未晚1 小时前
Canvas 绘制模糊?那是你没搞懂 DPR!
前端·canvas
Dream耀1 小时前
React合成事件揭秘:高效事件处理的幕后机制
前端·javascript
P7Dreamer1 小时前
Vue 3 + Element Plus 实现可定制的动态表格列配置组件
前端·vue.js