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

相关文章
|
1月前
|
弹性计算 Linux Windows
跨账号和同账号的ECS云服务器之间迁移教程
跨账号和同账号的ECS云服务器之间迁移教程
|
1月前
|
弹性计算 网络安全
阿里云国际OpenAPI多接口快速管理ECS服务器教程
阿里云国际OpenAPI多接口快速管理ECS服务器教程
|
22天前
|
弹性计算 安全 网络安全
阿里云服务器租用流程,四种阿里云服务器租用方式图文教程参考
阿里云服务器可以通过自定义租用、一键租用、云市场租用和活动租用四种方式去租用,不同的租用方式适合不同的用户群体,例如我们只是想租用一款配置较低且可以快速部署应用的云服务器,通常可以选择一键租用或者云市场租用,本文为大家展示不同租用方式的适合对象以及租用流程,以供初次租用阿里云服务器的用户参考和选择。下面是阿里云服务器租用的图文操作步骤。
|
25天前
|
关系型数据库 MySQL Linux
基于阿里云服务器Linux系统安装Docker完整图文教程(附部署开源项目)
基于阿里云服务器Linux系统安装Docker完整图文教程(附部署开源项目)
205 3
|
30天前
|
弹性计算 开发框架 .NET
阿里云服务器购买教程及云服务器地域、实例、操作系统、带宽等参数选择指南
对于初次购买阿里云服务器的用户来说,想使用阿里云服务器搭建网站或者运行APP、小程序等项目,第一步就是要先购买阿里云服务器,下面小编以图文形式给大家介绍一下阿里云服务器的购买流程,以及购买过程中如何云服务器地域、实例、带宽等关键配置和选择这些参数的一些注意事项,以供参考。
|
1月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
216 3
|
1月前
|
域名解析 网络协议 数据安全/隐私保护
阿里云轻量应用服务器搭建WordPress个人博客教程
阿里云轻量应用服务器搭建WordPress个人博客教程
|
1月前
|
Java Shell Maven
Flink-11 Flink Java 3分钟上手 打包Flink 提交任务至服务器执行 JobSubmit Maven打包Ja配置 maven-shade-plugin
Flink-11 Flink Java 3分钟上手 打包Flink 提交任务至服务器执行 JobSubmit Maven打包Ja配置 maven-shade-plugin
103 4
|
1月前
|
Ubuntu 安全 Linux
云服务器安装宝塔教程
云服务器安装宝塔教程
|
1月前
|
Linux C语言 C++
vsCode远程执行c和c++代码并操控linux服务器完整教程
这篇文章提供了一个完整的教程,介绍如何在Visual Studio Code中配置和使用插件来远程执行C和C++代码,并操控Linux服务器,包括安装VSCode、安装插件、配置插件、配置编译工具、升级glibc和编写代码进行调试的步骤。
212 0
vsCode远程执行c和c++代码并操控linux服务器完整教程