用vue做一个app

做一个专属自己的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