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

news2024/11/15 22:24:15

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。
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1972366.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Java中类的构造

1.私有化成员变量。 2.空参构造方法。 3.带全部参数的构造方法。 4.get / set方法。 package demo;public class student{//1.私有化成员变量。//2.空参构造方法。//3.带全部参数的构造方法。//4.get / set方法。private String name;private int age;public student() {}pu…

基于SpringBoot+Vue的多媒体信息共享平台(带1w+文档)

基于SpringBootVue的多媒体信息共享平台(带1w文档) 基于SpringBootVue的多媒体信息共享平台(带1w文档) 随着武理多媒体信息共享平台的不断出现,用户需求不断增多,武理多媒体信息共享平台也不断的得到壮大。该系统主要是满足多方面的需求的实际需要&#…

MySQL案例:MHA实现主备切换(主从架构)万字详解

目录 MHA 概念 MHA的组成 特点 案例介绍 (1)案例需求 (2)案例实现思路 (3)案例拓扑图 (4)案例环境 案例步骤 基本环境配置 关闭防火墙和内核安全机制 安装数据库 授权…

数据结构——链式结构二叉树

目录 一、二叉树的链式结构 二、手动创建一棵链式二叉树 三、 二叉树的遍历 (1)前序遍历(先序遍历) (2)中序遍历 (3)后序遍历 四、二叉树的有关函数 (1)头文件 (…

【机器学习】逻辑回归的梯度下降以及在一变量数据集、两变量数据集下探索优化的梯度下降算法

引言 在机器学习中,逻辑回归是一种用于二分类问题的方法。它使用逻辑函数(也称为sigmoid函数)来预测属于某个类别的概率。逻辑回归的损失函数通常是交叉熵损失,用于衡量预测值与真实值之间的差异 文章目录 引言一、逻辑回归的梯度…

电机的伺服调试和pid调节有什么异同?

电机的伺服调试和PID调节在调节控制系统的精度和性能方面都是重要的,但它们有不同的侧重点和方法: 伺服调试 定义:伺服调试是指对伺服系统进行优化和调整,以确保其在控制对象(如电机)上的表现达到预期。伺…

《LeetCode热题100》---<5.②普通数组篇五道>

本篇博客讲解LeetCode热题100道普通数组篇中的六道题 第三道:轮转数组(中等) 第四道:除自身以外数组的乘积(中等) 第三道:轮转数组(中等) 方法一:使用额外的数…

KubeSphere 部署的 Kubernetes 集群使用 GlusterFS 存储实战入门

转载:KubeSphere 部署的 Kubernetes 集群使用 GlusterFS 存储实战入门 知识点 定级:入门级 GlusterFS 和 Heketi 简介 GlusterFS 安装部署 Heketi 安装部署 Kubernetes 命令行对接 GlusterFS 实战服务器配置(架构1:1复刻小规模生产环境,…

AI助力,轻松组建你的汽车梦之队!

咱汽车销售想增加目标客户,可不简单!市场竞争那叫一个激烈,吸引客户注意力太难了!不过别怕,咱有办法。我在 ai123.cn 这个平台上,找到了好多适合咱的 AI 工具和资源,这就跟大家分享分享。 比如说…

upload-labs漏洞靶场~文件上传漏洞

寻找测试网站的文件上传的模块,常见:头像上传,修改上传,文件编辑器中文件上传,图片上传、媒体上传等,通过抓包上传恶意的文件进行测试,上传后缀名 asp php aspx 等的动态语言脚本,查…

基于C语言从0开始手撸MQTT协议代码连接标准的MQTT服务器,完成数据上传和命令下发响应(华为云IOT服务器)

文章目录 一、前言二、搭建开发环境三、网络编程基础概念科普3.1 什么是网络编程3.2 TCP 和 UDP协议介绍3.3 TCP通信的实现过程 四、Windows下的网络编程相关API介绍4.1 常用的函数介绍4.2 函数参数介绍4.3 编写代码体验网络编程 五、访问华为云IOT服务器创建一个产品和设备5.2…

STM32ADC

ADC简介:有打moba游戏的别搞混了,这不是射手adc。在32中,ADC的全称为:Analog-to-Digital Converter,指模拟/数字转换器 也就是模拟-数字电路的转换器。其实通俗的来讲,它就是一个电压表。 目录 一.ADC原理…

六、5 TIM输入捕获介绍

1、基本知识介绍 (1) 注意: ①4个输入捕获和输出比较通道,共用4个CCR寄存器 ②CH1到CH4,四个通道的引脚也是共用的 ③同一个定时器输入捕获和输出比较,不能同时使用 (2)输入捕获…

4G/5G无线视频采集设备如何通过国标28181接入到视频监控接入平台(视频统一接入平台)

目录 一、国标GB/T 28181介绍 1、国标GB/T28181 2、内容和特点 二、4G/5G无线视频采集设备 1、定义 2、主要功能: 3、技术特点 4、应用场景 二、接入准备工作 1、确定网络环境 (1)公网接入 (2)专网传输 2、…

使用 Rough.js 创建动态水平条形图

本文由ScriptEcho平台提供技术支持 项目地址:传送门 使用 Rough.js 创建动态可视化网络图 应用场景 Rough.js 是一个 JavaScript 库,它允许开发人员使用毛边风格创建可视化效果。该库适用于各种应用程序,例如: 数据可视化地图…

【C++11】解锁C++11新纪元:深入探索Lambda表达式的奥秘

📝个人主页🌹:Eternity._ ⏩收录专栏⏪:C “ 登神长阶 ” 🤡往期回顾🤡:C11右值引用 🌹🌹期待您的关注 🌹🌹 ❀C11 📒1. 可变参数模板…

.net # 检查 带有pdf xss

1.解决pdf含javasprct脚本动作,这里是验证pdf内部事件。相关pdf文件下载: 测试pdf文件 相关包 iTextSharp 5.5.13.4 iTextSharp using iTextSharp.text.pdf; using iTextSharp.text.pdf.parser;private Boolean IsPdfSafe(Stream stream){// PdfReader…

PyTorch+PyG实现图神经网络经典模型目录

前言 大家好,我是阿光。 本专栏整理了《图神经网络代码实战》,内包含了不同图神经网络的相关代码实现(PyG以及自实现),理论与实践相结合,如GCN、GAT、GraphSAGE等经典图网络,每一个代码实例都…

洛谷 P1739 表达式括号匹配 题解

题目描述 假设一个表达式有英文字母(小写)、运算符(、-、*、/)和左右小(圆)括号构成,以 作为表达式的结束符。请编写一个程序检查表达式中的左右圆括号是否匹配,若匹配&#xff0c…

springboot农产品报价系统-计算机毕业设计源码37300

摘 要 本研究基于鸿蒙系统,设计开发了一款农产品报价系统小程序,旨在帮助商家与买家更便捷、高效地进行交易。该系统利用鸿蒙系统的优势,实现了跨平台应用程序的开发,同时利用定位技术和数据采集技术,为用户提供了个性…