vue 打包为app

记录如下本身将web app打包成移动端app的步骤及问题vue


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


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

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

3,打开HBuilder,文件->打开目录,以下图vue-cli


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

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


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

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

随后就能够利用HBuilder链接真机运行ui

或者发行成为原生app


注意:若是真机运行或模拟器运行报以下错误

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


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

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

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


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




而后就能够在手机上玩啦~