目录

1.打包项目

1.1打包的app出现白屏。

1.2点击页面跳转不了，报 Loading chunk 2 failed. 等错误。

1.3.点手机物理按钮，直接退出程序。

2.Hbuilder发布

2.1创建项目5+App项目

2.2 替换文件

2.3利用云打包发布APP

1.打包项目

期间遇到的坑，提前说下，避免重复工作。

1.1打包的app出现白屏。

出现原因：路径不对，需要改config\index.js

解决办法：修改打包的路径。

1.2点击页面跳转不了，报 Loading chunk 2 failed. 等错误。

出现原因：不能用history配置路由，要用hash

解决办法：修改路由mode属性为hash。

1.3.点手机物理按钮，直接退出程序。

出现原因：无理返回键直接用监听不到路由，会直接退出程序。

解决办法：可以引入mui，就能正常使用了。

1.在webpack.base.conf.js里面引入mui。（图一）

2.下载mui相关文件，在main.js里面引入。（若需要使用mui其他方法，请自行查阅资料）（图二）

3.这个时候，引入mui可能会报错，我们需要修改一些文件。（图三）

（图一）

（图二）

（图三）

2.Hbuilder发布

2.1创建项目5+App项目

2.2 替换文件

先删除默认的css、img、js、index.html等无用默认文件。再将打包好的dist文件夹下的static和index.html文件，放至新建的项目下。

相关app的配置可自行在manifest.json中修改，这里不做详细说明。

2.3利用云打包发布APP

如有证书，就填写证书等信息，若没有可临时用Dcloud公用证书。

填完信息，点击打包即可，之后就等待打包生成app的下载链接，进行下载安装啦。

个人记录~

vue项目利用Hbuilder打包成APP流程，以及遇到的坑相关推荐

vue项目使用hbuildX打包成app
一.打包 1.在vue.config,js中加入 publicPath: './', 配置,防止打包后产生空白页 2.在axios.js中的默认服务器配置直接写服务器名称,在router里面配置路由模 ...
前端项目用hbuilder打包成APP后，调用api开启摄像头进行拍照, 5+app框架
这几个方法function是js通用的, 非vue项目也可以使用! 记得收藏哦! 重点是从按钮"开启相机" 开始,点击触发photo方法可以直接看method中的photo方法 ...
vue项目使用Hbuilder打包苹果IOS-App详细教程
本文主要记录一下本人使用vue开发的移动端App使用Hbuilder打包成苹果IOS-App的详细步骤,仅供参考,如有不足,请指教. 打包苹果IOSapp首先需要准备以下几项东西: 1.已经编写好的v ...
VUE项目如何使用HBuilder打包成app
1.配置好vue.config.js 文件在项目根目录下新建一个vue.config.js文件,并配置如下代码 module.exports = {lintOnSave: false, // 关闭格 ...
Vue HBuilder打包为app流程
vue 打包为app 记录以下自己将web app打包成移动端app的步骤及问题事先准备,开发完成的web app项目(也可以利用vue-cli脚手架构建vue模板项目),npm run dev可以 ...
vue项目使用electron打包成桌面应用
打包流程详情步骤: 1.准备工作: a.win7系统则确保node版本在v12以上,electron-builder对系统或版本有要求: b.项目路径不使用中文: c.使用淘宝镜像命令代替npm管理工 ...
VUE CLI 4.x 打包成APP后白屏解决办法打包APP教程
一般用VUE打包项目后,再把项目打包成APK安装包,在手机上打开应用我们会发现打开是一片白,这是什么原因呢? 路由模式为history模式. 资源的路径不对.默认情况下,Vue CLI 会假设你的应用 ...
Vue项目转apk打包成手机APP详细步骤
第一步: assetsPublicPath:' / ' =====> 替换成 assetsPublicPath:' ./ ' 第二步: 终端输入npm run build 打包项目生成 dis ...
vue项目通过HBuilder打包发布
一.打包工具HBuilder 1. 下载地址https://www.dcloud.io/hbuilderx.html 2. 根据需要进行下载,下载之后为压缩包,解压获得文件夹,在文件夹中找到HBuil ...

vue项目利用Hbuilder打包成APP流程，以及遇到的坑