Hbulid打包vue-cli项目生成APK

之前写过不少移动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文件夹
Hbulid打包vue-cli项目生成APK_第1张图片
4.新生成的文件夹以项目的方式打开
在工具栏中选择文件–打开目录–(选择dist文件夹所在路径)–给项目命名
Hbulid打包vue-cli项目生成APK_第2张图片
此时可以看到在工程栏视图如下,此时VueTest文件夹左侧是“W”图标
Hbulid打包vue-cli项目生成APK_第3张图片
5.右击工程文件夹–转换成移动APP
此时该工程文件夹的左侧图标变为了“A”,即移动APP项目
Hbulid打包vue-cli项目生成APK_第4张图片
6.真机运行或者发行APK
连接手机或者点击模拟器就可以真机运行了
在工具栏选择“发行”–发行为原生安装包
这里写图片描述
7.APP打包配置
点击发行为原生安装包后(我这里选择Android系统),选择“使用Dcloud公用证书”,点击打包
Hbulid打包vue-cli项目生成APK_第5张图片
8.查看打包状态并手动下载APK
点击打包后视图如下
Hbulid打包vue-cli项目生成APK_第6张图片
稍等片刻后即可完成APK的制作并且可以下载使用啦

你可能感兴趣的:(前端,Vue)