【源码】基于Vite和Vue3的跨平台开发模板

项目简介

本项目是一个基于Vite和Vue3的跨平台开发模板，借助uniapp的hbuilder编译器可打包成apk文件，架构基于网页容器webView。其旨在帮助开发者快速搭建跨平台应用开发环境，跨平台开发具备成本效益高、时间效率高、维护简单、用户体验一致等优点。

项目的主要特性和功能

1. 跨平台支持：应用程序能在移动设备（iOS和Android）、Web浏览器、桌面操作系统等不同类型设备上运行。
2. 依赖丰富：包含axios、vant、vue、vite-plugin-style-import、vue-router等主要依赖，可满足开发需求。
3. 请求封装：采用axios封装请求，支持请求拦截和响应拦截，还可自定义守卫路由等功能。
4. 交互控制：在index.html中提供了禁用缩放、双指放大、双击放大以及配置安卓端退出应用的详细方法，可按需取舍。

安装使用步骤

快速开始

1. 安装依赖：npm install
2. 运行项目：npm run dev

打包步骤

1. 执行打包命令：npm run build，得到打包好的dist目录，需核对项目引用文件是否符合相对路径规则，避免白屏问题。
2. 新建H5+项目：打开Hbuilder，新建一个H5+项目，删除除manifest.json外的所有文件，该文件包含应用所需图标及权限相关配置。
3. 复制文件：将打包的dist目录内的所有内容复制到H5+项目的主目录中。
4. 云打包：点击“发行” -> “云打包”，根据需求进行打包，过程可能需要几分钟。校验过程中最好采用原生android生成的密钥，测试时可忽略。打包完成后会产生unpackage目录下的apk路径，可在安卓系统安装测试。

开发注意事项

在vue.config.js文件的defineConfig节点中声明base: './'，确保打包时不会产生相对路径错误的问题。

参考资料

• UniApp
• Vite | 下一代的前端工具链 (vitejs.dev)
• Vue.js - 渐进式 JavaScript 框架 | Vue.js

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】