将vue项目打包成移动端app

原创 2018年04月17日 20:59:50
记录以下自己将web app打包成移动端app的步骤及问题

事先准备,开发完成的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

事先准备,开发完成的web app项目(也可以利用vue-cli脚手架构建vue模板项目),npm run dev可以正常预览的项目 1,将项目目录下config文件内index.js中asset...
  • zhoudan232
  • zhoudan232
  • 2017-06-19 13:58:01
  • 23907

Hbulid打包vue-cli项目生成APK

之前写过不少移动APP项目,但是平时写的Vue-cli项目都只在浏览器开发运行的,今天稍微写一下使用Hbulid打包Vue-cli项目生成APK的大致流程吧 1.准备已有的Vue-cli搭建的webA...
  • yuzhibo22
  • yuzhibo22
  • 2017-09-19 16:03:58
  • 5717

vue项目打包App

本地的vue项目打包成App。这里以Hbuilder为例。首选命令行进入项目的目录执行 npm run build   打包成功之后再项目下回生成一个dlist 文件夹。在Hbuilder中导入dl...
  • zhuoganliwanjin
  • zhuoganliwanjin
  • 2017-12-23 13:58:57
  • 254

利用HBuilder将vue项目打包成移动端app,运行页面空白问题解决

这里说一下问题所在打包后的dist文件夹我们是通过httpserver的命令运行的hs -o -p 9999(任意端口号)执行这条命令,在浏览器中就能正常访问,访问的地址是http://localho...
  • u012086400
  • u012086400
  • 2017-12-12 10:34:44
  • 1032

cordova打包vue项目为app

一、创建cordova项目1、创建项目前提条件(1)node.js详细安装步骤可参考node.js官网:https://nodejs.org/en/下载安装成功后,在命令窗口中输入npm -v查看是否...
  • zeternityyt
  • zeternityyt
  • 2018-04-01 22:20:49
  • 21

Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)

webapp项目已经通过vue-cli搭建的脚手架写好了,然后通过webpack打包成一个部署文件list,如下: 打开HBulider,打开目录,选择这个list,项目名称自己更改。 这个时...
  • wang1006008051
  • wang1006008051
  • 2017-09-22 17:23:29
  • 2566

vue项目打包后一片空白

修改在config文件夹下面的index.js中build模块导出的路径,assetsPublicPath默认的是'/',也就是根目录。而index.html和static在同一级目录下面,所以改为'...
  • luodao_
  • luodao_
  • 2018-01-19 11:34:48
  • 202

HBuilder打包Vue-cli构建的APP

cmd到开发路径下执行npm run build命令,生成dist文件夹    此时需要修改config/index.js里的assetsPublicPath的字段,初始项目是/他是指向项目根目录的...
  • qq_29247935
  • qq_29247935
  • 2017-07-06 09:13:37
  • 676

Vue 2.0 移动端音乐App【完整版】

  • 2018年01月19日 22:55
  • 49B
  • 下载

cordova打包vue2(webpack)android、ios app

使用cordova打包vue2(webpack)app for android1、vue项目 通过vue-cli脚手架建立项目,使用webpack进行打包,下边是一整套命令。 #npm 版本最好是最新...
  • yp090416
  • yp090416
  • 2017-07-19 13:19:03
  • 21176
收藏助手
不良信息举报
您举报文章:将vue项目打包成移动端app
举报原因:
原因补充:

(最多只允许输入30个字)