本文共 935 字，大约阅读时间需要 3 分钟。

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

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

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

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

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

3. 插件根据自己选择勾选。这是我的配置

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.jsmodule.exports = {
     // 选项...}

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

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

11. 这些都完成后就可以打包项目npm run build
12. 用HbuilderX新建项目,选择5+App
13. 把刚创建的项目中的manifest.json文件复制到VUE项目的dist文件夹中
14. 复制完成后右键dist文件夹选择重新识别项目类型
15. 最后就可以使用HbuilderX云打包来把vue项目打包成APK了，妈妈再也不担心我出现白屏了。

转载地址：https://blog.csdn.net/zwhy123/article/details/109925133 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！