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

相关推荐
耶啵奶膘33 分钟前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^2 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie3 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic3 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿3 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具4 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
customer084 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
qq_390161775 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test5 小时前
js下载excel示例demo
前端·javascript·excel
Yaml45 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理