uniApp 打包H5工程 超详细(打包-实现跨域-nignx配
2022-11-30 本文已影响0人
扶得一人醉如苏沐晨
打包步骤
当前端uniapp写的项目开发完成的时候,需要将页面打包出来,生成H5的静态文件,部署在服务器上,通过服务器链接地址,就可以直接在手机上点开访问 了。
在网上看了一圈,好像没有找到十分详细的教程,这里稍微详细的记录了一下,uniapp打包成H5部署到服务器教程。
这个运行的基础路径,是和编译之后的静态文件的文件夹是一致的,默认是h5,我这里改名字了,我这里将静态文件h5的文件夹改成了cts-h5项目需要,即一般来说就项目名称
2:点击菜单栏发行,点击选择网站-H5手机版,
3:在网站域名这一栏填写,网站域名,例如www.xxx.com或者你的服务器的IP地址47.103.XX.XX,(这个地址是你将项目打包之后存放放静态文件的地址)。总的来说就是你准备要把这个H5打包后放到的那一台服务器的IP
image.png
4:点击发行,控制台会自动编译
注意这个不同于vue,编译完成的文件不支持本地file协议打开。不要使用资源管理器直接打开。直接打开静态文件是看不到东西的。 如果想看到东西参考地址https://ask.dcloud.net.cn/article/37432。出现以下提示,说明编译成功 下面有个路径就是打好的H5包(里面放了 static+html )
image.png
5:找一个工具,连接自己的服务器,进入到自己的服务器的根目录底下。
我这里用的是Xftp工具。,我在根目录(一般根目录为 /usr/local/nginx/html)底下新建了一个cts-h5,(即静态H5的文件夹重命名了)
总的来说就是:创建一个以项目名(cts-h5)的文件夹,然后里面放入4步骤中的 (static+html )就好啦
好的,这个时候就已经部署成功了。
6:打开浏览器,输入服务器ip地址,访问一下index.html的内容吧
http://19.130.xxx.xxx:8089/cts-h5/index.html#/
主机ip和端口号也要注意,这里是我的主机和端口号,隐藏起来了。
7:注意,这三个地方的路径名称一定要一致哦。
1:打包时候的配置的运行的基础路径
2:服务器根目录底下存放静态文件static和index.html
3:浏览器里面访问的路径