uniapp开发打包成H5部署到服务器的详细步骤

作者:小跳会Coding 时间:2024-04-10 16:20:19 

前端使用uniapp开发项目完成后,需要将页面打包,生成H5的静态文件,部署在服务器上。
这样通过服务器链接地址,直接可以在手机上点开来访问。

打包全步骤如下:

一、点击菜单栏“发行”,点击选择“网站-PC Web或手机H5”,

uniapp开发打包成H5部署到服务器的详细步骤

二、填写网站标题和网站域名/服务器的IP地址。
(这个地址是将项目打包之后存放静态文件的地址)

uniapp开发打包成H5部署到服务器的详细步骤

三、点击进入manifest.json的h5配置里,根据自己的情况配置一些信息。
一定要注意配置 “运行的基础路径”,如果出现空白页面或者静态文件404的情况,可能是因为这个路径没有配置好。

uniapp开发打包成H5部署到服务器的详细步骤

四、点击发行,控制台会自动编译。出现以下提示,说明编译成功:

uniapp开发打包成H5部署到服务器的详细步骤

五、点击上图中的红框部分,就能看到已经打包好的静态页面了。(直接把这个h5文件压缩一下,发给后端就可以了)

uniapp开发打包成H5部署到服务器的详细步骤

如需要自己上传到服务器上,可继续以下步骤。
六、先拿到服务器的地址信息,找一个工具,连接上该项目的服务器,进入到服务器的根目录底下。
我这里用的是ftp工具。在根目录底下新建一个aofan文件夹,然后将上图中的static文件夹和index.html复制进去即可。
OK,这个时候就已经部署成功了。

七、打开浏览器,输入服务器ip地址,访问一下index.html的内容即可。

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

来源:https://blog.csdn.net/weixin_48596030/article/details/121910002

标签:uniapp,开发,h5,部署
0
投稿

猜你喜欢

  • mysql数据库sql优化原则(经验总结)

    2024-01-22 17:55:12
  • Hadoop分布式集群的搭建的方法步骤

    2022-06-08 06:02:42
  • Python编程使用PyQt5制作动态钟表示例

    2021-10-06 03:20:17
  • python使用paramiko模块实现ssh远程登陆上传文件并执行

    2021-01-09 00:35:03
  • IE8 的 JSON 解析 Bug

    2009-05-22 12:36:00
  • 解决python中使用PYQT时中文乱码问题

    2023-07-28 10:15:51
  • 编程经验点滴 动态SQL的拼接技巧

    2012-11-30 20:03:58
  • js multiple全选与取消全选实现代码

    2024-04-28 10:19:36
  • Python基于os.environ从windows获取环境变量

    2022-09-18 01:42:45
  • 全面了解CSS内置颜色(color)值

    2008-11-19 12:26:00
  • Golang控制通道实现协程等待详解

    2023-07-21 16:23:39
  • 让字体美起来

    2011-06-14 09:50:21
  • C语言实现访问及查询MySQL数据库的方法

    2024-01-12 18:01:31
  • 10张动图学会python循环与递归问题

    2023-08-23 10:55:42
  • python basemap 画出经纬度并标定的实例

    2023-08-23 23:26:40
  • Python逐行读取文件内容的方法总结

    2022-05-22 18:01:24
  • 简单介绍Ruby中的CGI编程

    2022-09-07 21:38:14
  • SQL Server 2008中的新日期数据类型

    2009-03-16 15:05:00
  • mysql动态游标学习(mysql存储过程游标)

    2024-01-21 12:58:50
  • django自定义模板标签过程解析

    2023-07-29 12:34:57
  • asp之家 网络编程 m.aspxhome.com