之前写过不少移动APP项目,但是平时写的Vue-cli项目都只在浏览器开发运行的,今天稍微写一下使用Hbulid打包Vue-cli项目生成APK的大致流程吧
1.准备已有的Vue-cli搭建的webAPP项目
确保 npm run dev 命令能正常运行
确保项目正常运行、预览、无报错
2.修改配置文件的生成路径
在项目的config文件夹中找到index.js文件
在改文件中找到assetsPublicPath,路径设置为 assetsPublicPath: ‘./’,
3.生成编译后的文件
在命令行执行 npm run dev 命令
可以看到在项目中生成了dist文件夹
这里写图片描述
4.新生成的文件夹以项目的方式打开
在工具栏中选择文件–打开目录–(选择dist文件夹所在路径)–给项目命名
这里写图片描述
此时可以看到在工程栏视图如下,此时VueTest文件夹左侧是“W”图标
这里写图片描述
5.右击工程文件夹–转换成移动APP
此时该工程文件夹的左侧图标变为了“A”,即移动APP项目
这里写图片描述
6.真机运行或者发行APK
连接手机或者点击模拟器就可以真机运行了
在工具栏选择“发行”–发行为原生安装包
这里写图片描述
7.APP打包配置
点击发行为原生安装包后(我这里选择Android系统),选择“使用Dcloud公用证书”,点击打包
这里写图片描述
8.查看打包状态并手动下载APK
点击打包后视图如下
这里写图片描述
稍等片刻后即可完成APK的制作并且可以下载使用啦
Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐