uniapp开发环境搭建及打包H5部署至Nginx

1、安装HBuild X工具
下载HBuild X工具,下载地址:https://www.dcloud.io/hbuilderx.html

在这里插入图片描述

下载解压到指定目录即可使用
2、导入项目

选中“文件”->“导入”->“从Git导入(G)…”

在这里插入图片描述

3、打包H5
(1)配置manifest.json

在这里插入图片描述

(2)选中“发行”->“网站-PC Web或手机H5(仅适用于uni-app)(H)”

在这里插入图片描述

输入网站标题和域名,点击【发行】

在这里插入图片描述

出现以下提示说明导出成功:

项目 'shop'导出h5成功,路径为:D:/Workspaces/HBuilderProjects/shop/unpackage/dist/build/h5

4、部署至Nginx
将D:/Workspaces/HBuilderProjects/shop/unpackage/dist/build/h5文件夹下得文件传至服务器/home/source/h5下
配置nginx.conf

#h5端
server {
    listen       10001;

    server_name  localhost;
    try_files $uri $uri/ /index.html;
    root    /home/source/h5;
}

5、测试
访问地址:http://192.168.1.38:10001
6、常见问题
(1)报错:此应用 DCloud APPID 非当前账号所有,请联系应用所有者设置此账号为协作者,或重新生成APPID后打包。
解决方法:
打开manifest.json,重新获取APPID

在这里插入图片描述

(2)图片无法自适应
解决方法:
nginx.conf文件加上一行:

include       mime.types;

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐