1、先创建好一个vue项目
2、打包该项目
注意：配置公共路径（config文件内index.js中assetsPublicPath修改为 assetsPublicPath: './'）
dist里面就是编译打包后的vue项目文件：
3、在HBuilderX中新建一个5+App项目
在新建的test项目中，除了App配置文件manifest.json，其他文件可以全都删除掉。
然后，将之前打包好的vue项目中的dist文件夹中的所有文件复制到test项目中
这些是dist文件夹中复制过来的
4、USB连接手机，打开开发者选项，打开以下USB功能：
手机连上后，配置manifest.json文件：
5、运行index.html文件，选择你自己的手机
OK，在手机上运行成功了！
我的项目效果如下：
如果想要将vue项目打包成移动App发布的话，可以参考这篇文章：
创建vue项目，利用HBuilderX打包成移动APP，在手机上运行的方法步骤 1、先创建好一个vue项目 2、打...
HBuilderX将React移动端项目打包成apk，并在模拟器进行展示 目前使用React技术栈开发的项目很多，...
开发工具 建议采用uni-app推荐的HBuilderX(项目创建采用HBuilderX可视化界面的方式创建) 为...
uni-app-base 项目构建 通过HBuilderX可视化界面创建的（HBuilderX：官方IDE下载地址...
创建 uni-app 有两种方式 快速搭建 uni-app 使用编译器HbuilderX 创建 使用 vue-cl...
1.首先项目开发完之后 （我使用的是vue-cli 3.*版本） 第一步: 在项目文件夹下创建一个 vue.con...
uni-app有两种创建方式 1.HBuilderX可视化创建 ( 推荐 ) 2.通过 vue-cli 创建 1....
HbuilderX的使用 官方文档地址 Vue的使用 官方文档地址 下面进入正题 一、创建vue(已经有项目了，直...
1、创建一个项目 2、创建vue.config.js 文件要打包成2个项目分别是A项目和B项目 3、创建项目路径 ...
Vant UI + Vue + Cli3.0 + Rem移动端项目搭建 1. 创建vue项目 创建项目 引入les...
本文标题：HBuilderX创建vue项目打包成移动APP
本文链接：https://www.haomeiwen.com/subject/fswndctx.html
网友评论