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

2021-12-23 15:59:02 阅读：305 来源： 互联网

标签：shop uniapp h5 Nginx 导入 APPID H5 打包

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;

标签：shop,uniapp,h5,Nginx,导入,APPID,H5,打包
来源： https://blog.csdn.net/u012069313/article/details/122082620

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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