uniapp 打包 H5,部署nginx

1. 打开 manifest.json 修改运行的基础路径

2.打包

3. nginx 配置路径

        location /h5/ {
        	alias   /www/data/html/h5/;
        	try_files $uri $uri/ /index.html;
        	index  index.html index.htm;
        }

### UniApp项目打包H5并使用Nginx部署 #### 准备工作 确保已经安装Node.js环境以及Nginx服务。对于Node.js环境,这用于运行`npm run build:h5`命令来构建UniApp项目的H5版本;而Nginx则作为Web服务器负责静态资源的分发。 #### 构建H5应用 在完成开发之后,在终端进入项目根目录执行构建命令以生成适用于生产环境的优化过的HTML/CSS/JavaScript文件: ```bash npm run build:h5 ``` 此操作会依据配置自动编译源码并将产出放置于指定输出路径,默认情况下位于`unpackage/dist/build/h5`内[^2]。 #### 将H5文件上传至服务器 将本地计算机上的`dist`文件夹内的全部内容传输给远程Linux服务器中的适当位置,比如可以放在`/var/www/html/`这样的公共网页根目录下: ```bash sudo cp -r local/path/to/dist/* /var/www/html/ ``` 这里假设目标主机已设置好SSH密钥认证以便简化SCP/SFTP过程[^5]。 #### 配置Nginx支持H5路由模式 编辑Nginx站点配置文件(通常是在`/etc/nginx/sites-available/default`),添加或修改如下所示的服务定义片段,注意调整实际物理存储地址匹配之前拷贝过去的那个地方: ```nginx server { listen 80; server_name yourdomain.com; location / { root /var/www/html/; index index.html index.htm; try_files $uri $uri/ /index.html; # 支持单页应用程序(SPA)的历史记录API导航方式 include mime.types; # 确保正确解析MIME类型从而避免图片显示异常等问题 } } ``` 上述配置中特别加入了`try_files`指令用来处理前端框架常见的URL重写需求,使得即使刷新浏览器也不会丢失状态信息[^3][^4]。另外还补充了`include mime.types;`语句防止某些特定类型的媒体素材加载失败的情况发生。 #### 测试与验证 保存更改后的配置文档,并重启Nginx使新设定生效: ```bash sudo systemctl restart nginx ``` 现在应该能够通过域名或者IP地址正常浏览到刚刚部署上去的应用程序首页了。如果遇到任何问题,请先查阅日志文件寻求线索(`/var/log/nginx/error.log`)。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值