每日前端
大道至简

vue-cli项目通过HBulider打包原生APP

1、已经写好的vue-cli项目,打包之前先注意修改两点,是为了避免打包后造成页面空白的问题

1.修改config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的,而你的路径不对,打开肯定是空白的。assetsPublicPath默认的是  ‘/’  也就是根目录。而我们的index.html和static在同一级目录下面。  所以要改为  ‘./ ’

2.src文件夹里边router/index.js路由配置里边默认模式是hash,如果你改成了history模式的话,打开也会是一片空白。所以改为hash或者直接把模式配置删除,让它默认的就行 。

2、打开hbuilderX新建一个5+App项目,然后保留里面的mainfest.json和unpackage文件夹,其他文件替换成vue-cli打包出来的dist文件夹里面的文件

3、修改项目文件manifest.json里面的应用入口配置,否则会造成app打包后请求不到数据

4、此时如果运行到手机没有问题就可以打包了

5、hbuilderX提供了云打包,点击“发行”,然后选择“原生App-云打包”,直接选择使用DCloud共用证书,最后等待打包即可

未经允许不得转载:每日前端 » vue-cli项目通过HBulider打包原生APP
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址