一. 整体方案
Vue2 Web 项目
↓ npm run build
dist/（静态文件）
↓
创建 5+App 项目（WebView）
↓
HBuilderX 云打包
↓
APK优点
-
✅ 不改 Vue2 代码
-
✅ 不需要会原生
-
✅ 1 天内能出包
-
✅ 适合内部查看 / 演示 / 大屏 / 管理系统
缺点
-
❌ 性能 = WebView
-
❌ 不适合重度动画 / 3D
二. 打包 Vue2 Web 项目
2.1 关键配置
-
确保使用 相对路径
// vue.config.js
module.exports = {
publicPath: './',
outputDir: 'dist',
assetsDir: 'static',
productionSourceMap: false
}
否则 APK 里会 白屏。
-
路由需要改成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包。
