vue 利用HBuilder打包apk处理各种坑

首先打包你的 vue 项目 生成 dist 文件夹

项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPublicPath中的“/”，改为“./”，
在修改productionSourceMap: false,然后打包生成的 dist 文件

image.png

然后直接访问你的index.html文件 这个时候页面会给你报一个错误

image.png

现在这个错误直接修改index.html里面的引用css路劲

将该代码路劲修改为下面

这个时候在访问你的index.html就不会报错了

第二个坑就是路由上面的路径有个一# 这个时候强迫症患者就会把他去掉 ，用了用路由的 history 模式

然后这个时候打包出来的dist文件去打包apk是有问题的。会出现路由的一些问题这个时候我们要把history 模式给干掉，然后在进行打包

image.png

第三个坑，静态文件图片我们通常是放在static文件夹下的。而我们引用这个图片的时候大多写的相对路径,这个时候打包出来的。访问页面时就访问不到你的图片或者是你的静态资源，解决办法就是采用绝对路径去引用静态资源

     相对路径
   绝对路径

这个时候我们就可以做打包工作了 首先在Hbuilderx新建一个5+APP的项目

image.png

然后我们把Vue项目build好的dist文件夹下的两个文件复制到项目中，配置一些权限图标，最后打包发行

image.png

image.png

image.png

image.png

打包成功直接下载

就大概就是我说遇到用Hbuilder打包的问题。可有很多种打包app方式
例如cordova+vue打包方式，这种方式要用到java jdk环境和Android SDK环境 也是非常方便的 就只是配置好说需要的环境就ok了。