uniapp打包成H5部署到服务器教程

摘要:
当当前Uniapp编写的项目完成后,需要打包页面,生成H5的静态文件,将其部署在服务器上,然后单击服务器链接地址,直接在手机上访问。在网上四处寻找后,似乎找不到非常详细的教程。在这里,我详细记录了uniapp被打包成H5并部署到服务器上。

当前端uniapp写的项目开发完成的时候,需要将页面打包出来,生成H5的静态文件,部署在服务器上,通过服务器链接地址,就可以直接在手机上点开访问 了。

在网上看了一圈,好像没有找到十分详细的教程,这里稍微详细的记录了一下,uniapp打包成H5部署到服务器教程。

步骤如下:

1:点击菜单栏发行,点击选择网站-H5手机版,

uniapp打包成H5部署到服务器教程第1张

2:在网站域名这一栏填写,网站域名,例如www.xxx.com或者你的服务器的IP地址47.103.XX.XX,(这个地址是你将项目打包之后存放放静态文件的地址)。

我这里为了考虑到安全因素,将自己的服务器地址马赛克了。

uniapp打包成H5部署到服务器教程第2张

3:点击高级按钮,进入到manifest.json的h5配置里面,根据自己的情况配置一些信息,我这里是默认的。

一定要注意配置运行时候的基础路径(下图红色框标记的地方),如果出现空白页面或者静态文件404的情况,可能是因为这个路径没有配置好。

(多嘴一句,这个运行的基础路径,是和编译之后的静态文件的文件夹是一致的,默认是h5,我这里改名字了,我这里将静态文件h5的文件夹改成了work项目需要)。

uniapp打包成H5部署到服务器教程第3张

4:点击发行,控制台会自动编译
注意这个不同于vue,编译完成的文件不支持本地file协议打开。不要使用资源管理器直接打开。直接打开静态文件是看不到东西的。出现以下提示,说明编译成功

uniapp打包成H5部署到服务器教程第4张

5:编译通过,生成静态的h5文件,我们需要将这个h5的文件,部署到我们前面填写的域名(或者服务器的ip)的根目录底下。

(这个h5在上传到服务器的时候,可以自己命名,我命名成work了,命名需要和发布之前的高级配置里面路径保持一致)。

uniapp打包成H5部署到服务器教程第5张

6:找一个工具,连接自己的服务器,进入到自己的服务器的根目录底下。

我这里用的是Xftp工具。,我在根目录底下新建了一个work,(即静态H5的文件夹重命名了)

uniapp打包成H5部署到服务器教程第6张

将static文件夹喝index.html复制进去

uniapp打包成H5部署到服务器教程第7张

图片.png

好的,这个时候就已经部署成功了。

7:打开浏览器,输入服务器ip地址,访问一下index.html的内容吧
http://47.10x.xx.78:8091/work/index.html#/
主机ip和端口号也要注意,这里是我的主机和端口号,隐藏起来了。

uniapp打包成H5部署到服务器教程第8张

8:注意,这三个地方的路径名称一定要一致哦。
1:打包时候的配置的运行的基础路径
2:服务器根目录底下存放静态文件static和index.html
3:浏览器里面访问的路径

uniapp打包成H5部署到服务器教程第9张

OK,这样就结束了,皆大欢喜,撒花

免责声明:文章转载自《uniapp打包成H5部署到服务器教程》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇程序静默安装的参数总结Chrome谷歌浏览器首页被改为Hao123导航怎么办|附各类解决方法【转】下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

iOS H5容器的一些探究(一):UIWebView和WKWebView的比较和选择

一、Native开发中为什么需要H5容器 Native开发原生应用是手机操作系统厂商(目前主要是苹果的iOS和google的Android)对外界提供的标准化的开发模式,他们对于native开发提供了一套标准化实现和优化方案。但是他们存在一些硬伤,比如App的发版周期偏长、有时无法跟上产品的更新节奏;灵活性差,如果有较大的方案变更,需要发版才能解决;如果存...

[转]微信小程序、微信公众号、H5之间相互跳转

本文转自:https://www.cnblogs.com/colorful-paopao1/p/8608609.html 转自慕课网 一、小程序和公众号 答案是:可以相互关联。 在微信公众号里可以添加小程序。 图片有点小,我把文字打出来吧: 可关联已有的小程序或快速创建小程序。已关联的小程序可被使用在自定义菜单和模版消息等场景中。 公众号可关联同主体的1...

利用H5缓存机制实现点击按钮第一次与之后再点击分别跳转不同页面

昨天碰到这样一个需求,要求点击按钮第一次跳转到a页面,之后再点击它就跳转到b页面。这个问题我首先就想到了利用H5的缓存sessionstorage来实现,SessionStorage用于本地存储一个会话中的数据,窗口关闭后,数据就会消失。是一种会话级别的存储。 sessionStorage: sessionStorage.setItem("key","1"...

OC与JS的交互(iOS与H5混编)

大神总结WKWebView的坑:https://mp.weixin.qq.com/s/rhYKLIbXOsUJC_n6dt9UfA 在开发过程中,经常会出现需要iOS移动端与H5混编的使用场景。 iOS中加载html网页, 可以使用UIWebView或WKWebView. 本篇博客将介绍两种控件使用过程中如何实现OC与JS的交互。 UIWebView de...

uniapp打包h5 出现'连接服务器超时,点击屏幕重试'的页面

1.出现页面如下,是偶现。 2.下载uniapp源码查看 "async": { //页面js异步加载配置 "loading": "AsyncLoading", //页面js加载时使用的组件(需注册为全局组件) "error": "AsyncError", //页面js加载失败时使用的组件(需注册为全局组...

html5标签知多少

此文为前段时间团队研究会出品,与小伙伴兮兮圆一起研究的成果,意外地上了公司km的今日推荐,今日挪过来,为新开张的博客先暖暖场吧。 一、常用标签 <header>、<footer>、<nav>、<aside>、<hgroup>、<section>、<article>、&...