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

  • 作者: 凯哥Java
  • 经验分享
  • 时间:2020-12-27 08:18
  • 74人已阅读
简介 当前端uniapp写的项目开发完成的时候,需要将页面打包出来,生成H5的静态文件,部署在服务器上,通过服务器链接地址,就可以直接在手机上点开访问了。在网上看了一圈,好像没有找到十分详细的教程,这里稍微详细的记录了一下,uniapp打包成H5部署到服务器教程。如果使用宝塔面板的话,直接发行。步骤如下:1:点击菜单栏发行,点击选择网站-H5手机版,2:在网站域名这一栏填写,网站域名,例如lingqua

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

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

如果使用宝塔面板的话,直接发行。

3ae40273159710ec4d79f44bb1945c4b.png

步骤如下:

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

9d73c7684e37fc10df69542e89b2dea8.png

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

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

dc984d48619ab4d3590b830dfe56c1dd.png

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

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

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

7e02ad82c28d09d96ec827baa68dcbf6.png

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

e10601f425575696a7db675967949777.png

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

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

a0a3468a25028c16e66546f4f155770b.png

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

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

429bdc5d1783750183b6054c313c4a21.png

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

02628aaf334b67d48157242bd1e4c886.png

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

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

http://lingquan.kaigejava.com

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

61b28fa7478cf200d6a9e6ec530842d7.png


Top Top