Vue项目打包成移动App以及在手机上运行

使用工具HBuilder 或者是HBuilder X

  1. 将完成的Vue项目打包 (build)后的dist文件放入编译器,在HBuilder中直接右键选择转换为移动App即可,在HBuilder X中要先新建一个5+App项目

Vue项目打包成移动App以及在手机上运行_第1张图片

在新建的test项目中,除了App配置文件manifest.json,其他文件可以全都删除掉。然后,将之前打包好的vue项目中的dist文件夹中的所有文件复制到test项目中
Vue项目打包成移动App以及在手机上运行_第2张图片

  1. USB连接手机,需要打开开发者选项,打开以下USB功能
    Vue项目打包成移动App以及在手机上运行_第3张图片
  2. 手机连上后可以配置manifest.json文件

HBuilder 和 HBuilder X配置界面可能会有差异,功能相同

Vue项目打包成移动App以及在手机上运行_第4张图片

  1. 运行index.html文件,选择你自己的手机即可真机测试配置
    Vue项目打包成移动App以及在手机上运行_第5张图片

所有的知识都是学习以及总结

你可能感兴趣的:(前端,vue.js)