用vue做一个app
做一个专属自己的app首先是如何打包:下载HBuilderx,下载好后创建5+app项目,然后npm run build 打包vue项目,生成dist文件,把dist文件的内容整个复制粘贴到新创的5+app项目中,有重复直接替换。替换完后安装安卓模拟器,我用的是逍遥安卓模拟器 ,安装完后运行,HBuilderx应该可以自己识别到,点击运行运行到模拟器中,如果没有检测到,重新打开HBuilder
做一个专属自己的app
首先是如何打包:
下载HBuilderx,下载好后创建5+app项目,然后npm run build 打包vue项目,生成dist文件,把dist文件的内容整个复制粘贴到新创的5+app项目中,有重复直接替换。
替换完后安装安卓模拟器,我用的是 逍遥安卓模拟器 ,安装完后运行,HBuilderx应该可以自己识别到,点击运行
运行到模拟器中,如果没有检测到,重新打开HBuilderx,和安卓模拟器,如果还是不行就百度找找问题。
运行到模拟中后,你安装的模拟器就会自己下载一个app,就是你这个项目的app了。
这里我遇到一个问题,就是项目打包后项目显示空白问题:
在你之前的vue项目中创建vue.config.js文件,里面加入:
module.exports = {
baseUrl:'./',//如果出错的话换成 publicPath:'./',(这个是因为vue版本问题)
outputDir:'dist'
}
还是不行的话,更改一下router的路由模式,改为hash模式
最后重新npm run build 打包,生成dist文件,再重新进行上面的操作。
最后在真机上运行app:
在HBuilderx中右键你的项目,点击发行原生app云打包,点击后会弹出打包选项框,起个android包名,使用公测证书,选择安心打包,其他默认就可以,之后会让你配置manifest.json,配置一下就行(百度),配置完后重新发行原生app云打包,会生成一个apk,把这个apk发到你手机上安装就可以了。(这里还有一个要注意的微信发送apk后会自动加一个xxx.apk.1的后缀,会不能安装,qq发apk就可以 。)
2021.10.30
更多推荐
所有评论(0)