【vue 项目打包成apk，运行在android环境遇到问题详解】

本文链接：https://blog.csdn.net/aaaarrrrrr/article/details/145683184

项目场景：

vue 开发的网页通过Hbuilder打包成安卓包apk,遇到apk 封装失败；低版本android 打开白屏问题；以及webview 不支持打开相机等问题。

问题描述

问题一：hbuilder生成apk

vue项目信息:

vue版本：2.7.0

vue-cli-service:4.4.6

安卓设备信息

andriod 版本：7.1.1

chrome内核版本：52.0.2743.100

vue 打包注意事项（踩坑过程）：

1.npm run build 生成的dist包内部的index.html文件建议先右键用本地浏览器运行一下，是否能成功加载不然可能会因为资源位置问题访问失败。例如下图报错（要首先确保你得dist 能够正常运行其次才是包装成apk 后才能成功展示不然可能会以为是apk 的问题——菜鸟血泪史）

解决办法：

vue 打包之后 index.html 报错 Failed to load resource: net::ERR_FILE_NOT_FOUND-CSDN博客文章浏览阅读929次。因此我们需要改一下打包后html访问静态资源的路径。找到项目中根目录下的vue.config.js。打包完成后顺手打开了 index.html。再次打开index.html 就跑起来了。因为打包你要的静态资源都在同目录下。在module.exports下加入。而默认访问的静态资源路径是有问题的。这是个路径找不到的问题。https://blog.csdn.net/weixin_45966674/article/details/130326612

vue项目打包后白屏或者报错Failed to load resource: net::ERR_FILE_NOT_FOUND以及图标为小方框 - tongzhe2006 - 博客园

2. 确保dist 里的文件能够正常访问后按照以下链接进行apk 的设置。

把vue项目打包成安卓安装包apk_hbuilder打包vue项目生成apk-CSDN博客文章浏览阅读1.9k次，点赞29次，收藏21次。对于一些简单的安卓app功能可以使用自己更熟悉的vue转apk来快速实现。_hbuilder打包vue项目生成apkhttps://blog.csdn.net/weixin_51877314/article/details/143207256

问题二：apk成功运行后虚拟机上页面渲染正常，ipad 上白屏，无报错信息。

现象：

运行在虚拟机上展示正常；在目标android 设备上白屏，调用vconsole 后台没有报错信息，element中 html 文件内id=app的<div> 下无挂载dom。打包后的js 全部正常加载。

调试过程：

查看android 设备内核版本

尝试1：安装vconsole 尝试查看后台报错内容，失败，页面加载失败导致vconsole 都没有成功挂载。

尝试2：通过usb 连接设备与电脑。在电脑的浏览器上（edge、chrome 上打开 chrome://inspect/#devices 或 edge://inspect/#devices,运行项目查看控制台发现还是没有任何报错提示页面空白。——失败。

看了很多其他相关的文章，又有了新的思路。

尝试3:下载对应系统版本内核的浏览器，运行项目查看是否有报错提示。于是下载52版本内核的chrome 浏览器在本地运行dist包内的index.html 文件。果然控制台提示报错信息。Unexpected token ...

查阅相关文章最终思路就是老版本浏览器不支持es6 的语法，需要通过vue 配置babel，打包生成es5的源码兼容老版本浏览器。

解决办法尝试三中的具体操作：

历史版本chrome 浏览器的下载连接https://crportable.sourceforge.net/releases.html

针对vue2 vue cli 4.4.6 脚手架的babel 兼容配置

1.babel.config.js 中代码如下：主要代码在 presets中。

browsers: ['ie >= 7', 'safari >= 7', 'chrome >= 35'] 是为了兼容低版本的浏览器

module.exports = {
  presets: [
    //未兼容前的babel 配置
    // '@vue/cli-plugin-babel/preset'

    //兼容后的babel配置
    [
      '@vue/app',
      {
        targets: {
          browsers: ['ie >= 7', 'safari >= 7', 'chrome >= 35']
        },
        useBuiltIns: 'entry',
        // 三种兼容方法一种是入口声明entry 一种是 useBuiltIns: 'usage' 会自动 获取入口entry webpack 配置 其他都需要安装babel
        // babel新版本废弃 @babel/polyfill
        // import "core-js";
        // import "regenerator-runtime/runtime";
        polyfills: ['es.symbol',
          'es.array.filter',
          'es.promise',
          'es.promise.finally',
          'es/map',
          'es/set',
          'es.array.for-each',
          'es.object.define-properties',
          'es.object.define-property',
          'es.object.get-own-property-descriptor',
          'es.object.get-own-property-descriptors',
          'es.object.keys',
          'es.object.to-string',
          'web.dom-collections.for-each',
          'esnext.global-this',
          'esnext.string.match-all'
        ]
      }
    ],
    '@vue/babel-preset-jsx'
  ],
 
  "plugins": [
  
  ],
  'env': {
    'development': {
      'plugins': ['dynamic-import-node']
    }
  }
}

2.然后安装 core-js 与regenerator-runtime/runtime 在main.js 入口文件中引入。

 npm install core-js

npm i regenerator-runtime -S

//main.js 文件

import 'core-js';
import 'regenerator-runtime/runtime';

3.在vue.config.js 文件中加入 transpileDependencies: [/node_modules/]。

原因是虽然引入babel 可以编译为es5 但是node_moudels 中的一些插件他默认不会进行babel 编译导致他的代码中还是会存在es6 的代码。加入该配置项，即可解决。也可以在数组内部只设置你需要单独编译的第三方插件，这样编译时间会快。但是我的插件太多同时不知道是何插件导致，所以索性全部编译。

以上配置参考该链接 vue cli 4 es5 兼容https://blog.csdn.net/sinat_41292836/article/details/116499810

每个人的vue 版本可能不同，脚手架可能有vue cli 也有 vite，所以以下链接希望能够提供参考。最终思路都是一样的就是通过babel polyfill 将vue 编码编译为支持es5,来解决浏览器兼容问题

使用 babel 编译 js 为 es5 支持 iehttps://www.cnblogs.com/daysme/p/15034767.html

vue 打包时将es6 打包成es5https://blog.csdn.net/qq_43557848/article/details/143302559

vue-cli打包产出兼容es5模式探索https://juejin.cn/post/7312404619519426586 关于vue/cli4.x vue-cli@4.x版本浏览器兼容问题处理，兼容iehttps://devpress.csdn.net/vue/66cade328f4f502e1cfd9b56.html

最终结果：

在低版本浏览器上运行成功后通过Hbuilder 打包成apk 运行成功。

作者辛酸史：

前端开发菜鸟：首次听说apk 这个东西，抱着试试看的想法先尝试了 android studio webview 组件来封装apk。对于一些配置项以及设置全靠度娘好在最后在虚拟器上看到项目页面了，但是在目标android 设备上不行。先是考虑过是不是 android studio 中的webview 配置问题，比如常见的
settings.setDomStorageEnabled(true)
webView.getSettings().setJavaScriptEnabled(true);
但是想了想虚拟机上能运行就说明 android studio 配置没问题。

后来我又换了其他项目的dist 包运行发现哎~ 竟然目标设备可以展示。那基本锁定是我vue 项目的问题了。

本人考虑过是不是vue router 问题导致的js 加载完成后不跳转路由。后来排除了这个想法因为控制台页面 <div id = "app"> 下面连dom 都没有那连挂载都没成功何来路由跳转。

想破头也想不明白为啥虚拟机可以目标设备不可以。后来在网上狂翻资料发现，哦可能是浏览器版本太低的问题。所以按照上文的方式进行babel 配置编码为es5 来兼容chrome 52 最终通过android webview 的方式成功运行了。但是我最终没有选择android studio webview 的方式来生成apk 是因为他还有个坑，低版本的android webview 不支持唤醒相机相册功能。需要写android 代码来自己开发。当然也有资源但是个人搞不定。最终选择Hbuilder h5 + app 的方式。来生成apk 。Hbuilder 的相关配置可以可视化操作比较方便。但是他的生成apk 次数有上限。

附赠 android webview 生成apk 的配置链接

andriod studio 通过webview 组件生产apk 包https://blog.csdn.net/ydk1203/article/details/142546667