uni-app项目打包成H5部署到服务器
创始人
2024-09-26 18:23:08
0

1. uni-app项目打包成H5部署到服务器

  前端使用 uniapp开发项目完成后,需要将页面打包,生成H5的静态文件,部署在服务器上。这样通过服务器链接地址,直接可以在手机上点开来访问。
  将项目打包成H5部署到服务器,然后链接地址使用uni-app或者android的项目的web组件引用,可实现多项目的数据融合。
在这里插入图片描述

1.1. 打包项目

  HBuilderX下载地址: https://www.dcloud.io/hbuilderx.html
(1)配置路径
  uni-app项目 – >manifest.json - > Web配置 - >运行的基础路径填写域名后的访问地址.(输入网址例如; http://10.210.120.100:1881/app/web)
  一定要注意配置“运行的基础路径”,如果出现空白页面或者静态文件404的情况,可能是因为这个路径没有配置好。
在这里插入图片描述
(2)HBuilderX打开你的uni-app项目 – > 点发行 - > 网站 - PC Web或手机H5
在这里插入图片描述
(3)填写网站标题和网站域名/服务器的IP地址
  点完之后会弹出一个框, 填写网站标题和和域名之后点发行
在这里插入图片描述
(4)点完之后控制台会显示正在编译中… , 稍等一会,控制台会自动编译。出现以下提示,说明编译成功
在这里插入图片描述
(5)打包成功 , 生成了unpackage文件夹, 打包好的文件存放在里面
在这里插入图片描述
在这里插入图片描述
(6)外部链接参数传递数据(?id=123&name=zzs)接收位置
在这里插入图片描述

1.2. H5部署到服务器

  将 dist 文件夹中的所有文件上传到你的 Web 服务器。这可以通过FTP、Git、或其他部署工具完成。如果你没有独立的服务器,也可以将文件上传到一些免费的静态文件托管服务,比如 Netlify、Vercel 或 GitHub Pages。
  文件上传完成,你可以通过浏览器访问你的应用。使用浏览器打开 index.html 文件或者部署后的应用地址。
  如果你的应用使用了路由(例如 Vue Router),确保在服务器上配置了路由的重定向。这通常涉及到将所有请求指向你的 index.html 文件,以确保客户端路由正常工作。
如果你的应用需要访问其他域下的数据(跨域请求),确保服务器支持跨域请求,或者你可以在服务器上进行配置。
  这些步骤可以帮助你将 Uni-app 打包生成的 H5 包部署到 Web 服务器上,并通过浏览器访问。请注意,部署 H5 应用时需要考虑到服务器配置、路由、跨域等问题,确保你的应用在生产环境中能够正常运行。
  用一个工具, 把打包好的文件上传到你的服务器 , FinalShell , 用别的工具也可以。
FinalShell官网,http://www.hostbuf.com/c/131.html
在这里插入图片描述
在这里插入图片描述
  点完之后弹出这个框, 填写完信息之后点连接 , 服务器的相关信息问公司的人要。
在这里插入图片描述
  配置完后将刚刚打包好的文件存放路径 ,unpackage/dist/build/h5 , 把static文件夹和index.html 复制到右侧服务器中部署的文件夹里, 看你们是部署到哪个文件夹就拖到哪里。
  部署成功 ,打开浏览器,输入服务器ip地址,访问一首页的内容吧 _
地址就是 服务器ip/部署的文件夹/ , 比如服务器ip是10.210.120.100:1881,部署的文件夹名字是project , 地址就是如下
http://10.210.120.100:1881/app/web

1.3. uniapp生成apk

  发行–原生App-原生App-云打包
  将项目打包成H5部署到服务器,然后链接地址使用apk的web组件引用,可实现与其他项目的数据关联融合。
在这里插入图片描述
在这里插入图片描述
  点击现在apk。
在这里插入图片描述

相关内容

热门资讯

王者充值安卓系统在哪,轻松解锁... 亲爱的小伙伴们,是不是在王者荣耀的世界里,你发现了一个小秘密——想要充值,却不知道安卓系统里的充值入...
小米安卓原生系统桌面,体验非凡 哇塞,你有没有想过,你的小米手机其实可以变身成安卓原生的样子?没错,就是那种干净利落、简洁大方的原生...
天辰诀 安卓系统,安卓系统下的... 你知道吗?最近在安卓系统上有一款游戏火得一塌糊涂,那就是《天辰诀》!这款游戏不仅画面精美,玩法多样,...
安卓记录仪系统,安卓系统下的M... 你有没有想过,你的行车记录仪其实就像是一个小小的智能助手呢?它不仅能帮你记录行车过程中的点点滴滴,还...
安卓系统解码图案忘记,找回遗忘... 亲爱的手机控们,你们有没有遇到过这种情况:手机解锁图案忘得一干二净,急得像热锅上的蚂蚁,心里那个慌啊...
谷歌研发安卓新系统,探索谷歌的... 哇塞,你知道吗?谷歌最近可是秘密研发了一款全新的笔记本电脑,而且据说这款笔记本可能会搭载安卓系统哦!...
安卓如何转换ios系统,探索系... 你有没有想过,把你的安卓手机变成苹果手机呢?想象那光滑的屏幕、流畅的系统,还有那独特的苹果风格,是不...
小米11安卓系统耗电,深度剖析... 你有没有发现,最近你的小米11手机好像有点儿“懒洋洋”的,充电宝不离身,电量像坐过山车一样忽高忽低?...
魅蓝是安卓系统,深度解析安卓系... 你有没有想过,你的手机里那个小小的屏幕,竟然能装下整个世界?今天,咱们就来聊聊魅蓝手机,看看它那小小...
安卓系统怎么替换log,And... 亲爱的安卓开发者们,你是否曾在调试过程中为找不到合适的日志替换方法而头疼?别担心,今天我要带你一起探...
安卓手机好的系统,安卓手机操作... 你有没有发现,现在手机市场上的安卓手机真是琳琅满目,让人挑花了眼。不过,你知道吗?在这些安卓手机中,...
安卓系统mac电脑配置,打造安... 亲爱的电脑迷们,你是否曾想过,你的苹果笔记本里也能装上安卓系统?是的,你没听错!今天,就让我带你一起...
状元郎平板安卓系统,引领平板教... 你有没有想过,一款平板电脑,竟然能让你在学习之余,还能畅游安卓世界的海洋?没错,今天我要跟你聊聊的就...
安卓系统哪个传奇好玩,畅玩经典... 手机里的游戏可是咱们休闲娱乐的一大法宝,尤其是安卓系统,那丰富的游戏资源简直让人挑花眼。今天,就让我...
联众支持安卓系统吗,“联众PD... 斗地主爱好者们,是不是在为找不到一款好玩的斗地主游戏而烦恼呢?别急,今天我要给大家揭秘一个好消息——...
康佳电视安卓系统太卡,康佳电视... 亲爱的电视迷们,你们有没有遇到过这样的烦恼:家里的康佳电视用着用着就变得像蜗牛一样慢吞吞的,让人抓狂...
ios对比安卓系统流畅,流畅体... 你有没有发现,用手机的时候,有时候iOS系统就像个优雅的舞者,而安卓系统则像个活力四射的少年?没错,...
安卓系统占用内存小,深度解析优... 你有没有发现,手机用久了,就像人一样,会变得“臃肿”起来?尤其是安卓系统,有时候感觉就像一个超级大胃...
安卓系统怎么下载jdk,JDK... 你有没有想过,在安卓手机上也能编写Java程序呢?没错,就是那种在电脑上写代码的感觉,现在也能在手机...
安卓系统调手机亮度,轻松掌握手... 手机屏幕亮度总是让你眼花缭乱?别急,今天就来手把手教你如何轻松调节安卓系统的手机亮度,让你的手机屏幕...