vue 项目/备案网页/ip网页打包成 apk 安装到平板/手机（含vue项目跨域代理打包成apk后无法访问接口的解决方案）

下载安装HBuilder X编辑器

https://www.dcloud.io/hbuilderx.html

新建 5+APP 项目

打开 HBuilder X，新建项目

此处项目名以 ‘test’ 为例

含跨域代理的vue项目改造

若 vue 项目中含跨域代理，如 vue.config.js

module.exports = {
  publicPath: "./", // 【必要】静态文件使用相对路径
  outputDir: "./dist", //打包后的文件夹名字及路径
  devServer: {
    proxy: {
      "/myAPI": {
        target: " http://43.140.200.74:8810/", //换成你自己项目的开发或者生产地址
        ws: false, //也可以忽略不写，不写不会影响跨域
        changeOrigin: true, //是否开启跨域，值为 true 就是开启， false 不开启
        pathRewrite: {
          "^/myAPI": "", //注册全局路径， 但是在你请求的时候前面需要加上 /myAPI
        },
      },
    },
  },
};

则在打包成 apk 后会无法访问接口，因为app无跨域限制，不能使用跨域代理，需使用访问接口的绝对路径，如：原接口 “/myAPI/dmis/login” 需改为 “http://43.140.200.74:8810/dmis/login” 才能使用。

为了便捷，可通过修改 axios 配置文件实现，如在 src\axios.js 中按下图增加代码

axios.defaults.baseURL = "http://43.140.200.74:8810/";
 

config.url = config.url.replace("/myAPI", "");

植入vue 项目

若是 vue 项目，则保留新建的 test 项目中的 manifest.json 文件，将其他文件全部删掉，将 vue 项目打包后的文件拷贝到 test 项目中，范例如下图

原 vue 项目打包后的文件

植入vue 项目后的 test 项目

修改 manifest.json 配置

根据项目实际需求，修改 manifest.json 配置，常见的修改有：

应用名称，应用版本号，应用入口

若是将备案网页/ip网页打包成 apk，则将应用入口改成备案网页/ip网页地址即可，如

应用图标

点浏览选择png格式的图片后，点击 自动生成所有图标并替换 ，即可便捷更换应用图标

设置横竖屏

vue 项目/网页通常适配的pc上的横屏效果，所以打包时通常也需配置为横屏。

取消不必要的模块

默认配置了很多模块，如扫码、相机相册等，没涉及时建议取消，可减小apk包的大小。

特别是通讯录模块，因涉及用户敏感信息，打包时会需要进行认证，通常需要取消勾选。

开始打包

使用 HBuilder X 进行云打包

因云打包人较多，可能需要排队

完成排队，进入打包状态后，约需 2-5分钟完成打包

打包成功后，根据目录提示可找到最终的 apk 文件

在模拟器上安装测试

在电脑上下载安装 雷电模拟器

https://www.ldmnq.com/

打开 雷电模拟器，通过拖拽或浏览的方式安装 apk

安装成功后

单击打开即可