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

相关文章
|
6天前
|
XML Java 数据格式
Servlet 教程 之 Servlet 服务器 HTTP 响应 3
`Servlet`教程示例展示了如何创建一个HTTP响应,使用`@WebServlet("/Refresh")`的`Refresh`类继承`HttpServlet`。在`doGet`方法中,设置了`Refresh`头以每5秒自动刷新,并用`setContentType("text/html;charset=UTF-8")`设定内容类型。还使用`Calendar`和`SimpleDateFormat`获取并格式化当前时间显示。相应的`web.xml`配置指定了Servlet路径。当访问此Servlet时,页面将每5秒更新一次显示的系统时间。
16 4
|
7天前
|
安全 Unix Linux
Windows如何远程连接服务器?服务器远程连接图文教程
服务器操作系统可以实现对计算机硬件与软件的直接控制和管理协调,任何计算机的运行离不开操作系统,服务器也一样,服务器操作系统主要分为四大流派:Windows Server、Netware、Unix和Linux。今天驰网飞飞将和你分享Windows server远程连接图文教程,希望可以帮助到你
22 4
Windows如何远程连接服务器?服务器远程连接图文教程
|
3天前
|
域名解析 网络协议 安全
服务器部署访问出错的原因和解决办法
部署到服务器后无法访问可能是由于配置错误、权限问题或网络设置不当。解决办法包括检查服务器配置文件、确保文件路径正确、调整权限设置以及检查防火墙和端口设置。
13 4
|
9天前
|
Java 应用服务中间件 Linux
在阿里云服务器上部署Tomcat详细图文详解
本文介绍了在阿里云服务器上安装和配置JDK和Tomcat的步骤。首先,需要注册阿里云账号并进行实名认证,然后购买并设置服务器。接着,通过File Zilla连接服务器,创建Java和Tomcat的安装目录,并将JDK和Tomcat的tar.gz文件上传到服务器,解压并重命名。之后,配置JDK的环境变量,将catalina.sh复制到/etc/init.d/目录下,并修改相关配置。最后,启动Tomcat并配置安全组规则,确保可以通过公网访问。
|
9天前
|
弹性计算 Java Linux
阿里云服务器搭建部署宝塔详细流程
该内容是一个阿里云服务器和域名的配置指南。首先,需注册阿里云账号并进行企业实名认证。接着,选购服务器如2核2G1兆的Linux系统,并购买域名。完成域名备案后,进行域名解析和ICP备案。然后,通过远程连接登录服务器,重置密码,安装宝塔面板。在安全组中开启宝塔面板随机生成的端口。最后,登录宝塔面板安装LNMP环境,配置数据库如MySQL和Redis,部署JDK、Tomcat,上传前端和后端项目以实现上线。
|
10天前
|
弹性计算 JavaScript Java
阿里云服务器搭建部署宝塔详细流程
以下是内容的摘要: 本文主要介绍了在阿里云上创建和配置服务器环境的步骤,包括注册阿里云账号、实名认证、购买和设置服务器、域名的获取与备案、以及使用宝塔面板安装和配置环境。首先,用户需要注册阿里云账号并进行实名认证,选择合适的服务器配置。接着,购买服务器后,要准备并备案域名,以便通过友好的网址访问网站。在服务器上安装宝塔面板,可以方便地管理和配置LAMP/LNMP/Tomcat/Node.js等应用环境。完成这些步骤后,用户还需要在宝塔面板中安装MySQL、Redis等数据库,部署Java或Vue项目,并配置相关端口。最后,将前端项目打包上传至服务器,并设置站点,即可实现网站的上线。
|
10天前
|
应用服务中间件 Linux 开发工具
如何在阿里云服务器快速搭建部署Nginx环境
以下是内容的摘要: 本文档主要介绍了在阿里云上购买和配置服务器的步骤,包括注册阿里云账号、实名认证、选择和购买云服务器、配置安全组、使用Xshell和Xftp进行远程连接和文件传输,以及安装和配置Nginx服务器的过程。在完成这些步骤后,你将能够在服务器上部署和运行自己的网站或应用。
|
12天前
|
NoSQL 关系型数据库 MySQL
阿里云服务器部署项目流程
本文主要讲解阿里云服务器的部署,如何选择配置等
|
1月前
|
Ubuntu JavaScript 关系型数据库
在阿里云Ubuntu 20.04服务器中搭建一个 Ghost 博客
在阿里云Ubuntu 20.04服务器上部署Ghost博客的步骤包括创建新用户、安装Nginx、MySQL和Node.js 18.x。首先,通过`adduser`命令创建非root用户,然后安装Nginx和MySQL。接着,设置Node.js环境,下载Nodesource GPG密钥并安装Node.js 18.x。之后,使用`npm`安装Ghost-CLI,创建Ghost安装目录并进行安装。配置过程中需提供博客URL、数据库连接信息等。最后,测试访问前台首页和后台管理页面。确保DNS设置正确,并根据提示完成Ghost博客的配置。
在阿里云Ubuntu 20.04服务器中搭建一个 Ghost 博客
|
1月前
|
存储 弹性计算 数据可视化
要将ECS中的文件直接传输到阿里云网盘与相册(
【2月更文挑战第31天】要将ECS中的文件直接传输到阿里云网盘与相册(
420 4