vue2的web项目打包成安卓apk包

一. 整体方案

Vue2 Web 项目
   ↓ npm run build
dist/（静态文件）
   ↓
创建 5+App 项目（WebView）
   ↓
HBuilderX 云打包
   ↓
APK

优点

• ✅ 不改 Vue2 代码

• ✅ 不需要会原生

• ✅ 1 天内能出包

• ✅ 适合内部查看 / 演示 / 大屏 / 管理系统

缺点

• ❌ 性能 = WebView

• ❌ 不适合重度动画 / 3D

二. 打包 Vue2 Web 项目

2.1 关键配置

1. 确保使用 相对路径

   // vue.config.js

   module.exports = {
   publicPath: './',
   outputDir: 'dist',
   assetsDir: 'static',
   productionSourceMap: false
   }

否则 APK 里会 白屏。

2. 路由需要改成hash，不能使用history

   const router = new Router({
   mode: "hash", // 去掉url中的#
   scrollBehavior: () => ({ y: 0 }),
   routes: constantRoutes,
   });

3.持久化token

不能使用Cookie，可以用 localStorage去设置持久化功能

改用 localStorage 存储 Token，确保数据能持久化；Web 端继续使用 Cookie。

js-cookie 在本地文件协议下可能无法正确持久化 Token。如果 Token 存不进去， getToken() 取不到值，路由守卫 ( permission.js ) 就会把你弹回登录页。

4.注意接口请求，在webview中的proxy转发代理无效，需要直接设置接口前缀地址

2.2 使用npm run build 打包

打包之后会生成dist文件夹，使用vscode 的 Open with live Server 启动服务，确保里面功能能正常使用。

三. 创建5+App项目

1.使用 HBuilderX新建项目。

2.将dist目录下所有内容复制到新建好的项目下

四. 使用HBuilder调试项目

按照图片调试，运行到安卓手机上，如何一切正常访问，则可以打apk包。