VUE CLI 4.x 打包成APP后白屏解决办法&&打包APP教程

一般用VUE打包项目后，再把项目打包成APK安装包，在手机上打开应用我们会发现打开是一片白，这是什么原因呢？

1. 路由模式为history模式。
2. 资源的路径不对。默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，而我们打包成应用时应把路径修改为相对路径，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径。

接下来就教大家如何把VUE项目打包成APK

1. 用VUE CLI创建项目vue create demo

2. 选择Manually select features自定义配置

3. 把Progressive Web App (PWA) Support [把网页做的更像原生app]选上，其他插件根据自己选择勾选。这是我的配置

4. 这里选择VUE版本2.x

5. 这里会问我们是否使用history模式，我们选择n，使用默认的hash模式

6. 这里根据自己需要选择
   In dedicated config files [在一个独立的文件中]
In package.json [放在package.json中]

7. Save this as a preset for future projects? (y/N)
   [你希望把本次的设置保存到一个预设吗?]

8. 等待项目创建完成后我们添加axios来完成ajax请求

cd demo
vue add axios

9. 我们在项目目录中新建vue.config.js,这个文件应该导出一个包含了选项的对象：

// vue.config.js
module.exports = {
  // 选项...
}

配置参考

10. 我们设置为相对路径'./,这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径，也可以用在类似 Cordova hybrid 应用的文件系统中。

// vue.config.js
module.exports = {
  // 选项...
  publicPath:'./'
}

11. 进入axios.js
    

12. 取消划线代码注释，解决跨域问题
    

13. 这些都完成后就可以打包项目npm run build

14. 用HbuilderX新建项目,选择5+App

15. 把刚创建的项目中的manifest.json文件复制到VUE项目的dist文件夹中

16. 复制完成后右键dist文件夹选择重新识别项目类型

17. 最后就可以使用HbuilderX云打包来把vue项目打包成APK了，妈妈再也不担心我出现白屏了。