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

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

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

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


步骤如下:

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

 


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


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



 

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


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


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


 

4:点击发行,控制台会自动编译

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


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

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

 

 

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


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

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

 


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

7:打开浏览器,输入服务器ip地址,访问一下index.html的内容吧


主机ip和端口号也要注意,这里是我的主机和端口号,隐藏起来了。


 

8:注意,这三个地方的路径名称一定要一致哦。

1:打包时候的配置的运行的基础路径

2:服务器根目录底下存放静态文件static和index.html

3:浏览器里面访问的路径



 

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

相关文章
|
人工智能 移动开发 JavaScript
如何用uniapp打包桌面客户端exe包,vue或者uni项目如何打包桌面客户端之electron开发-优雅草央千澈以开源蜻蜓AI工具为例子演示完整教程-开源代码附上
如何用uniapp打包桌面客户端exe包,vue或者uni项目如何打包桌面客户端之electron开发-优雅草央千澈以开源蜻蜓AI工具为例子演示完整教程-开源代码附上
1975 18
|
12月前
|
开发者
Uniapp开发鸿蒙应用教程之自定义导航栏
本文介绍了在Uniapp跨平台开发鸿蒙应用时,如何实现自定义导航栏。通过修改pages.json文件可调整默认导航栏样式,但若需添加组件(如搜索框、按钮等),则需手动创建自定义导航栏组件,以适配鸿蒙系统。文中给出了详细的配置代码与实现步骤,帮助开发者灵活控制界面布局。#鸿蒙 #Uniapp #跨平台开发
|
iOS开发 开发者
uniapp开发ios打包Error code = -5000 Error message: Error: certificate file(p12) import failed!报错问题如何解决
uniapp开发ios打包Error code = -5000 Error message: Error: certificate file(p12) import failed!报错问题如何解决
972 67
uniapp开发ios打包Error code = -5000 Error message: Error: certificate file(p12) import failed!报错问题如何解决
|
12月前
|
容器
Uniapp开发鸿蒙购物应用教程之商品列表
本教程分享如何使用UniApp开发鸿蒙应用首页商品列表,通过网格布局实现商品分类与商品展示,详解布局方式与代码实现。
|
12月前
|
前端开发 开发者 容器
Uniapp开发鸿蒙购物项目教程之样式选择器
本篇教程介绍了uniapp开发鸿蒙应用中的样式选择器,包括类选择器、ID选择器、属性选择器、内联选择器和后代选择器,并讲解了它们的基本用法与优先级规则。通过简单示例帮助开发者理解如何为组件设置样式,同时提醒合理使用!important以避免样式管理混乱。适合初学者掌握鸿蒙跨平台开发中的基础样式控制方法。
|
移动开发 Android开发 容器
uniapp中使用videojs构建H5直播播放器
【10月更文挑战第14天】这两天在开发H5直播带货功能模块,使用原生的video播放器播放不了m3u8的流地址,于是找了videojs,参考了网上的一些资料研究了一下,感觉还不错,videojs播放m3u8流地址还挺稳定的,下面就简单记录一下uniapp里面使用方式
2245 129
|
12月前
|
JavaScript API 开发者
Uniapp开发鸿蒙应用教程之选项式api和组合式api
本文介绍了在Uniapp开发鸿蒙应用时,如何通过选项式API和组合式API进行数据操作。以修改年龄值为例,对比展示了两种API的代码结构与区别,并重点演示了组合式API中更简洁、灵活的写法,帮助开发者理解并掌握现代Vue开发模式。#鸿蒙三方框架 #Uniapp
|
JavaScript 应用服务中间件 nginx
Vue项目部署:如何打包并上传至服务器进行部署?
以上就是Vue项目打包及部署的方法,希望对你有所帮助。描述中可能会有一些小疏漏,但基本流程应该没有问题。记住要根据你的实际情况调整对应的目录路径和服务器IP地址等信息。此外,实际操作时可能会遇到各种问题,解决问题的能力是每一位开发者必备的技能。祝你部署顺利!
2757 17
|
前端开发 小程序 Java
uniapp-网络数据请求全教程
这篇文档介绍了如何在uni-app项目中使用第三方包发起网络请求
1072 3

热门文章

最新文章