事先准备,开发完成的web app项目(也可以利用vue-cli脚手架构建vue模板项目),npm run dev可以正常预览的项目

1,将项目目录下config文件内index.js中assetsPublicPath修改为 assetsPublicPath: './'

2,执行npm run build之后生成dist文件夹

3,打开HBuilder,文件->打开目录,如下图

选择刚才生成的dist目录,输入项目名称,点击完成

附HBuilder下载地址:http://www.dcloud.io/

3,此时会看到HBuilder项目下多了一个W标识(表示web项目)的myApp项目,

右键菜单选择‘转换成移动‘转换成移动App’,然后‘myApp’前面的标识就变成了‘A’,至此就已经转换成移动app了,

随后就可以利用HBuilder连接真机运行

或者发行成为原生app

注意:如果真机运行或模拟器运行报如下错误

Uncaught Error: [vuex] vuex requires a Promise polyfill in this browser

以下为以android apk为例的发行为原生app的步骤

1,点击发行,这里发布测试apk选择使用DCloud公用证书,点击‘打包’

2,正在制作安装包,制作完成,手动下载

3,将下载的apk安装到android的手机看效果,以下是放到模拟器中的效果

利用HBuilder将vue项目打包成移动端app的更多相关文章

  1. vue项目打包成html,在本地点击直接能打开

    默认情况下vue项目打包后,本地打开index.html是空白的,有报错.Failed to load resource: net::ERR_FILE_NOT_FOUND 这时需要修改config-& ...

  2. cordova+vue 项目打包成Android(apk)应用

    现在使用vue开发的项目越来越多,使用vue开发的移动端打包就成了最大的问题.现在前端打包方案有好多种,但是综合来说,我比较喜欢用cordova来进行Android和ios的打包,配置完成之后,每次只 ...

  3. cordova将vue项目打包成apk

    1,若vue项目不在cordova项目里,直接把它复制进来,避免改动代码的麻烦 2,直接按照以下链接进行操作即可 链接:https://www.cnblogs.com/qirui/p/8421372. ...

  4. 使用electron将单页面vue webapp 打包成 PC端应用

    在看张鑫旭博客得时候看到了electron这个东西,来了兴趣,就按照上面写的将已经做好得vue项目拿来试了试,出乎意料得顺利 electron简单说下electron,就是把 chrome内核和你的项 ...

  5. cordova+vue 项目打包成APK应用遇到的问题和解决方法

    公司前端界面用的是vue,我要嵌入到Android中生成App第一步:安装nodenode安装:直接进入官网https://nodejs.org/zh-cn/,下载最新版本安装.安装之后在命令行中使用 ...

  6. 记录下hbuilder vue项目打包APP 在IOS上点击延迟的问题

    做的项目打包成APP在IOS 上有延迟问题,在安卓下却不会,联想到之前 用IONIC时打包的APP也是 在IOS下有300毫秒延迟问题.所以 只能 认吧. 安装fastclick 插件: npm in ...

  7. Java项目打包成exe的详细教程

    Java项目打包成exe的详细教程 把Java项目打包成exe共分为以下两步: 1. 利用Eclipse先把Java项目先打成jar包 2. 利用exe4j工具把jar包转成exe 这里以Java项目 ...

  8. AndroidStudio项目打包成jar

    AndroidStudio项目打包成jar 前言:在eclipse中我们知道如何将一个项目导出为jar包,现在普遍AndroidStuido开发,这里一步一步详加介绍AS项目打包成jar,jar和ar ...

  9. AS 3.1 项目打包成jar或aar

    1.首先明白一个道理. Android Studio编译的时候会自动将项目生成jar和aar的,我一开始以为jar需要自己单独生成,其实AS已经自动生成了,网上找的很多资料都是一个复制的过程而已. 只 ...

随机推荐

  1. 服务发现 - consul 的介绍、部署和使用

    什么是服务发现 相关源码: spring cloud demo 微服务的框架体系中,服务发现是不能不提的一个模块.我相信了解或者熟悉微服务的童鞋应该都知道它的重要性.这里我只是简单的提一下,毕竟这不是 ...

  2. 2018牛客网暑期ACM多校训练营(第一场)A Monotonic Matrix(LGV)

    题意 分析 考虑01和12的分界线是(n, 0)到(0,m)的两条不相交(可重合)路径分界线以及分界线以上的点是一种,分界线下是一种平移其中一条变成(n-1, -1)到(-1,m-1); 此时起点为{ ...

  3. 前端下拉框选择和动态生成调用div

    进入到一个项目期中,一边做项目,一边学习其中用到的知识.这些知识都是零碎的,有数据库,有html,有js,还有django.趁周末时间,整理前面遇到过的前端相关的知识点. 下拉框选择 <html ...

  4. vue-router拦截

    说明:以下均在main.js中添加. 主要思路 1.在路由分发时,检查本地缓存是否有账号信息,如果没有,跳转登陆页面,传入当前路由 2.在发送请求时,添加账号token 3.在接收请求时,检查响应的数 ...

  5. 常见排序算法之python实现

    冒泡排序 简介 冒泡排序(英语:Bubble Sort)是一种简单的排序算法.它重复地遍历要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来.遍历数列的工作是重复地进行直到没有再需要交 ...

  6. 一个Silverlight工程的各文件解析

    创建一个解决方案,这个解决方案包括一个ASP.NET网站项目和一个Silverlight应用程序项目. 1)ASP.net项目: -------------Default.aspx:ASP.net默认 ...

  7. HTML 5 Web 本地存储

    1.使用localStorage 2.使用sessionStorage 两者区别1关闭网页不失效,2失效.用法示例 localStorage.setItem(“key”,“value”)//存储 lo ...

  8. python中#!/usr/bin/env python与#!/usr/bin/python

    通常在脚本语言的第一行会看到#!/usr/bin/env python 与 #!/usr/bin/python其中之一,这两句话的目的都是指出你的python文件用什么可执行程序去运行它. #!/us ...

  9. RESTful API学习Day2 - Django REST framework

    Django REST framework 参考文档: 官方文档:官方文档 中文文档:中文文档 一.是什么? 基于Django开发RESTful API的一个框架 为什么要用它? 补充: ​ CBV的 ...

  10. 使用Protobuf定义网络协议

    准备工具: 工具下载地址如下:https://github.com/protocolbuffers/protobuf/releases/tag/v3.6.1,主要使用到的文件有: protoc.exe ...