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,这样就结束了,皆大欢喜,撒花

相关文章
|
17天前
|
网络协议 网络安全
基于bind软件部署DNS服务器
关于如何使用bind软件部署DNS服务器的教程,包括DNS服务器的类型、基于bind软件的部署步骤、验证DNS服务器可用性的指导,以及如何进行DNS正向解析的实现。
18 2
基于bind软件部署DNS服务器
|
18天前
|
存储 关系型数据库 MySQL
使用Docker快速部署Mysql服务器
本文介绍了如何使用Docker快速部署MySQL服务器,包括下载官方MySQL镜像、启动容器、设置密码、连接MySQL服务器以及注意事项。
101 18
|
20天前
|
UED
JSF文件下载:解锁终极文件传输秘籍,让你的Web应用瞬间高大上!
【8月更文挑战第31天】掌握JSF文件下载功能对构建全面的Web应用至关重要。本文通过具体代码示例,详细介绍如何在JSF中实现文件下载。关键在于后端Bean中的文件读取与响应设置。示例展示了从创建实体类到使用`<h:commandLink>`触发下载的全过程,并通过正确设置响应头和处理文件流,确保文件能被顺利下载。这将显著提升Web应用的实用性与用户体验。
35 0
|
20天前
|
Java 数据库 API
JSF与JPA的史诗级联盟:如何编织数据持久化的华丽织锦,重塑Web应用的荣耀
【8月更文挑战第31天】JavaServer Faces (JSF) 和 Java Persistence API (JPA) 分别是构建Java Web应用的用户界面组件框架和持久化标准。结合使用JSF与JPA,能够打造强大的数据驱动Web应用。首先,通过定义实体类(如`User`)和配置`persistence.xml`来设置JPA环境。然后,在JSF中利用Managed Bean(如`UserBean`)管理业务逻辑,通过`EntityManager`执行数据持久化操作。
31 0
|
20天前
|
JavaScript 搜索推荐 前端开发
从零搭建到部署:Angular与Angular Universal手把手教你实现服务器端渲染(SSR),全面解析及实战指南助你提升Web应用性能与SEO优化效果
【8月更文挑战第31天】服务器端渲染(SSR)是现代Web开发的关键技术,能显著提升SEO效果及首屏加载速度,改善用户体验。Angular Universal作为官方SSR解决方案,允许在服务器端生成静态HTML文件。本文通过具体示例详细介绍如何使用Angular Universal实现SSR,并分享最佳实践。首先需安装Node.js和npm。
20 0
|
2月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
|
2月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
37 7
|
2月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
54 7
|
2月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
2月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的旅游攻略系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的旅游攻略系统的详细设计和实现(源码+lw+部署文档+讲解等)