1. 创建Vue项目并测试可正常运行

• 创建：可使用vue脚手架工具vue-cli创建vue项目，并安装依赖
• 测试：输入启动命令npm run dev，测试项目是否能正常启动

2. 项目打包（生成dist目录）

使用npm run build打包命令生成dist目录

备注1：在vue打包成dist文件之前，需修改config目录下的index.js配置文件，将打包文件的资源文件路径更改为当前目录下的绝对路径，否则将导致打包的app在真机运行时出现界面白屏的问题。

解决项目文件路径引用错误导致文件加载为404(界面白屏)的问题.png

备注2：若Vue项目有多个页面(使用脚手架创建的vue项目默认仅一个页面)，在vue打包生成dist目录之前，需更改vue项目中的路由模型配置：将H5的历史记录模式改为hash模式，否则将导致打包的app在真机运行时首屏可展示但点击路由无法跳转的问题。

解决文件动态加载的资源地址错误导致页面404找不到(无法跳转)的问题.png

3. 使用HBuilder将dist包含的 web项目 转换为 移动 APP项目

• 导入项目(打开dist目录)：打开HBuilder->【文件】->【打开目录】->找到打包生成的dist目录

  
  导入项目.png

• 转化为app：右键dist->转换成移动App

  
  转换成移动App.png

• 转化过程中会生成manifest.json配置文件，转化成功后提醒如下

  
  11.png

4. 在manifest.json中配置移动APP所需的配置项

• 基本信息配置（应用名称、版本号、页面入口、应用描述等）
• 图标配置
• 启动图配置
• SDK配置
• 模块权限配置

• 页面引用关系配置等

  
  配置项.png

5. 云打包生成app

HBuilder菜单栏->【发行】->【云打包-打原生安装包】->选择使用DCloud公用证书->点击打包，最后将apk安装包安装到手机上就可以正常使用了。

云打包.png