uni-app项目打包成H5部署到服务器(超详细步骤)_uniapp部署h5到云服务器怎么访问

1 , HBuilderX打开你的uni-app项目 -- > 点发行 - > 网站 - PC Web或手机H5 

2、点完之后会弹出一个框, 填写网站标题和和域名之后点发行 

 

3 , 点完之后控制台会显示正在编译中... , 稍等一会

 

4、 打包成功 , 生成了unpackage文件夹, 打包好的文件存放在里面 

二 , 用一个工具, 把打包好的文件上传到你的服务器 , 我用的是Xftp , 用别的工具也可以,这里推荐一款免费的软件FileZilla,直接在官网下载免费的。 

我用的是试用版,直接在官网输入姓名和邮箱在发送的邮箱链接中直接下载体验即可。

1, 打开Xftp , 点小窗口的新建

 

2 、 点完之后弹出这个框, 填写完信息之后点连接 , 服务器的相关信息问公司的要

 

如果上面的用户名和密码填写的是连接远程的用户名和密码会弹出

 

 所以在填写这一步之前需要先在远程服务器上对FTP进行设置,我的是直接在phpStudy里面进行配置的,如下图所示：

3、点击连接之后,当连接成功的时候显示如下所示:

 

4 、然后会看到右侧出现了新建会话的窗口 , 表示连接到服务器了,左侧是电脑本地的文件,右侧是服务器的。然后在左侧进入到我们打包好的文件路径unpackage/dist/build/h5,把static文件夹和index.html 复制到右侧服务器中部署的文件夹里,服务器里面的文件夹要对应。我的是在服务器的桌面新建了一个叫做mayi的文件夹。

 5、上传之后在服务器显示的是mayi这个文件夹里面有两个文件如下所示:

理论上这个时候就可以直接通过ip地址去访问我们的项目了,但是我这里不行,访问之后是空白页面。

6、我的解决办法是在mayi文件夹里面再新建一个mayi的文件夹,然后将static放入mayi里面去。

 

 

7、部署成功 ，打开浏览器，输入服务器ip地址，访问一首页的内容。我这里是直接访问ip地址然后就能访问到首页的内容。比如服务器ip是http://47.115.75.100/#/即可访问项目首页。

以上内容仅供参考，有不正确之处欢迎交流一起共同进步!