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

这篇具有很好参考价值的文章主要介绍了vue 项目/备案网页/ip网页打包成 apk 安装到平板/手机(含vue项目跨域代理打包成apk后无法访问接口的解决方案)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

下载安装HBuilder X编辑器

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

新建 5+APP 项目

打开 HBuilder X,新建项目

vue 项目/备案网页/ip网页打包成 apk 安装到平板/手机(含vue项目跨域代理打包成apk后无法访问接口的解决方案),# Vue,# uni-app,# 已归档链接,vue.js,uni-app
此处项目名以 ‘test’ 为例
vue 项目/备案网页/ip网页打包成 apk 安装到平板/手机(含vue项目跨域代理打包成apk后无法访问接口的解决方案),# Vue,# uni-app,# 已归档链接,vue.js,uni-app

含跨域代理的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 中按下图增加代码

vue 项目/备案网页/ip网页打包成 apk 安装到平板/手机(含vue项目跨域代理打包成apk后无法访问接口的解决方案),# Vue,# uni-app,# 已归档链接,vue.js,uni-app

axios.defaults.baseURL = "http://43.140.200.74:8810/";
config.url = config.url.replace("/myAPI", "");

植入vue 项目

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

原 vue 项目打包后的文件
vue 项目/备案网页/ip网页打包成 apk 安装到平板/手机(含vue项目跨域代理打包成apk后无法访问接口的解决方案),# Vue,# uni-app,# 已归档链接,vue.js,uni-app

植入vue 项目后的 test 项目
vue 项目/备案网页/ip网页打包成 apk 安装到平板/手机(含vue项目跨域代理打包成apk后无法访问接口的解决方案),# Vue,# uni-app,# 已归档链接,vue.js,uni-app

修改 manifest.json 配置

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

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

vue 项目/备案网页/ip网页打包成 apk 安装到平板/手机(含vue项目跨域代理打包成apk后无法访问接口的解决方案),# Vue,# uni-app,# 已归档链接,vue.js,uni-app
若是将备案网页/ip网页打包成 apk,则将应用入口改成备案网页/ip网页地址即可,如

vue 项目/备案网页/ip网页打包成 apk 安装到平板/手机(含vue项目跨域代理打包成apk后无法访问接口的解决方案),# Vue,# uni-app,# 已归档链接,vue.js,uni-app

应用图标

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

vue 项目/备案网页/ip网页打包成 apk 安装到平板/手机(含vue项目跨域代理打包成apk后无法访问接口的解决方案),# Vue,# uni-app,# 已归档链接,vue.js,uni-app

设置横竖屏

vue 项目/网页通常适配的pc上的横屏效果,所以打包时通常也需配置为横屏。
vue 项目/备案网页/ip网页打包成 apk 安装到平板/手机(含vue项目跨域代理打包成apk后无法访问接口的解决方案),# Vue,# uni-app,# 已归档链接,vue.js,uni-app

取消不必要的模块

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

vue 项目/备案网页/ip网页打包成 apk 安装到平板/手机(含vue项目跨域代理打包成apk后无法访问接口的解决方案),# Vue,# uni-app,# 已归档链接,vue.js,uni-app
特别是通讯录模块,因涉及用户敏感信息,打包时会需要进行认证,通常需要取消勾选。

开始打包

使用 HBuilder X 进行云打包

vue 项目/备案网页/ip网页打包成 apk 安装到平板/手机(含vue项目跨域代理打包成apk后无法访问接口的解决方案),# Vue,# uni-app,# 已归档链接,vue.js,uni-app
vue 项目/备案网页/ip网页打包成 apk 安装到平板/手机(含vue项目跨域代理打包成apk后无法访问接口的解决方案),# Vue,# uni-app,# 已归档链接,vue.js,uni-app
vue 项目/备案网页/ip网页打包成 apk 安装到平板/手机(含vue项目跨域代理打包成apk后无法访问接口的解决方案),# Vue,# uni-app,# 已归档链接,vue.js,uni-app

vue 项目/备案网页/ip网页打包成 apk 安装到平板/手机(含vue项目跨域代理打包成apk后无法访问接口的解决方案),# Vue,# uni-app,# 已归档链接,vue.js,uni-app
因云打包人较多,可能需要排队
vue 项目/备案网页/ip网页打包成 apk 安装到平板/手机(含vue项目跨域代理打包成apk后无法访问接口的解决方案),# Vue,# uni-app,# 已归档链接,vue.js,uni-app
完成排队,进入打包状态后,约需 2-5分钟完成打包
vue 项目/备案网页/ip网页打包成 apk 安装到平板/手机(含vue项目跨域代理打包成apk后无法访问接口的解决方案),# Vue,# uni-app,# 已归档链接,vue.js,uni-app
打包成功后,根据目录提示可找到最终的 apk 文件

在模拟器上安装测试

在电脑上下载安装 雷电模拟器
https://www.ldmnq.com/

打开 雷电模拟器,通过拖拽或浏览的方式安装 apk
vue 项目/备案网页/ip网页打包成 apk 安装到平板/手机(含vue项目跨域代理打包成apk后无法访问接口的解决方案),# Vue,# uni-app,# 已归档链接,vue.js,uni-app
安装成功后

vue 项目/备案网页/ip网页打包成 apk 安装到平板/手机(含vue项目跨域代理打包成apk后无法访问接口的解决方案),# Vue,# uni-app,# 已归档链接,vue.js,uni-app
单击打开即可

vue 项目/备案网页/ip网页打包成 apk 安装到平板/手机(含vue项目跨域代理打包成apk后无法访问接口的解决方案),# Vue,# uni-app,# 已归档链接,vue.js,uni-app文章来源地址https://www.toymoban.com/news/detail-770470.html

到了这里,关于vue 项目/备案网页/ip网页打包成 apk 安装到平板/手机(含vue项目跨域代理打包成apk后无法访问接口的解决方案)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用wab2app将网页打包成APK

    通过开源项目ChatGPT-Next-Web部署完了私人网页ChatGPT,为了使访问更加便捷,便想着使用wab2app打包为APK,虽然最终达成了效果,可一路走来遇到了很多坑儿,记录下 有要打包的网站和软件HBuilder X,软件官网:https://www.dcloud.io/hbuilderx.html 然后流程如下 创建项目 这一部分设置要

    2024年02月08日
    浏览(26)
  • unity打包apk运行于google手机

    第一次打包apk运行于Pixel 7 Pro 一直提示安装包无法安装 untiy版本2020.1.0f1 有两点需要注意 Scrpting Backend 需要选择 IL2CPP 勾选 ARM64 勾选 Custom Main Mainfest 在Assets - Plugins - Android文件夹下 AndroidMainfest 中增加android:exported=\\\"true\\\"

    2024年02月22日
    浏览(41)
  • 利用MSF打包加固APK对安卓手机进行控制

    由于经典的MSF生成apk安装包控制,版本较低,高版本安卓手机可能会出现版本不支持或无法使用的现象,而且apk无法正常使用,没有图形化界面,比较假。 相比于原始的msf远控,此版本app在进行远控时,被注入的app可以正常运行,原始msf生成的app程序,只在桌面上有一个图标

    2024年01月16日
    浏览(40)
  • 【b站咸虾米】chapter4_vue组件_新课uniapp零基础入门到项目打包(微信小程序/H5/vue/安卓apk)全掌握

    课程地址:【新课uniapp零基础入门到项目打包(微信小程序/H5/vue/安卓apk)全掌握】 https://www.bilibili.com/video/BV1mT411K7nW/?p=12share_source=copy_webvd_source=b1cb921b73fe3808550eaf2224d1c155 uni-app官网 组件,无论是小程序还是vue,都是非常关键的。 现在单页面程序,主要的依据就是组件。 组件

    2024年01月20日
    浏览(61)
  • 【b站咸虾米】chapter3_vue基础_新课uniapp零基础入门到项目打包(微信小程序/H5/vue/安卓apk)全掌握

    课程地址:【新课uniapp零基础入门到项目打包(微信小程序/H5/vue/安卓apk)全掌握】 https://www.bilibili.com/video/BV1mT411K7nW/?p=12share_source=copy_webvd_source=b1cb921b73fe3808550eaf2224d1c155 目录 三、vue基础 3.1 vue介绍与传统js的差异化  3.2 模板语法 3.3 data属性 3.4 条件渲染  3.4.1 v-if和v-else 3.4

    2024年01月21日
    浏览(155)
  • WebStorm开发uni-app ,用vue2实现手机APP(apk) + 微信小程序多端项目开发方案

    我们主要分析了如下小程序开发框架,主要包括: 框架 技术栈 案例 微信小程序 支付宝小程序 百度小程序 头条小程序 H5 App uni-app Vue 丰富 ⭕ ⭕️ ⭕️ ⭕ ⭕️ ⭕ Taro React 丰富 ⭕ ⭕ ⭕ ⭕ ⭕ ⭕ wepy Vue 丰富 ⭕ ❌ ❌ ❌ ❌ ❌ mpvue Vue 丰富 ⭕ ❌ ❌ ❌ ⭕️ ❌  首先,就要排

    2024年02月08日
    浏览(76)
  • QT----写完的程序打包为APK在自己的手机上运行

    qtcreater–工具-QTMaintenaceTool-startMaintenaceTool—登陆—添加或修改组件—找到android,安装 若是没有android这个包,就吧右边全勾上,筛选一下就会出现了 打开qtcreater–工具-外部-配置,配置android的sdk、ndk,选择路径下载等,让下边全绿 此时我们重新打开qtcreater就会有Android 的选

    2024年03月10日
    浏览(43)
  • Flutter项目打包生成APK

    flutter实现安卓打包:(以安卓Studio工具为例) (1)创建key.jks文件 在安卓studio中调整至项目路径,例如: 我的项目所在地 然后输入命令: 最后的 alias key , key指的是签名文件的别名。 其中 E:Flutterfluttershuqi 是我希望.jks文件创建的位置, 此时你的key.jks文件就创建成功了,

    2023年04月15日
    浏览(38)
  • 【b站咸虾米】chapter1&2_uniapp介绍与uniapp基础_新课uniapp零基础入门到项目打包(微信小程序/H5/vue/安卓apk)全掌握

    课程地址:【新课uniapp零基础入门到项目打包(微信小程序/H5/vue/安卓apk)全掌握】 https://www.bilibili.com/video/BV1mT411K7nW/?p=12share_source=copy_webvd_source=b1cb921b73fe3808550eaf2224d1c155 目录 一、uniapp和HBuilderX介绍 二、uniapp基础 2.1  新建项目、项目目录、预览uni项目 2.1.1 新建项目 2.1.2 项目

    2024年01月20日
    浏览(54)
  • 【flutter电子木鱼】flutter 打包 android apk,记录配置签名的过程/调试的过程及flutter build apk放到手机上用。

    目标通过这篇blog记录一下flutter打包android apk的过程,项目是参考以下链接的git仓库,然后自己重新创建了一个project。安卓应用市场的木鱼充斥着广告和付费体验极差,自己做一个还可以根据喜好做适应性调整,不用担心被偷后台也不用烦广告和一些奇怪的布局,干净清爽,

    2024年02月10日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包