【uniapp nginx 部署H5 】

已于 2024-05-30 10:55:19 修改
阅读量698 收藏
点赞数 2
文章标签： 前端 uniapp html5
于 2024-05-30 10:53:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43163986/article/details/139317454
版权

uniapp nginx 部署H5 二级域名

uniapp 在部署H5页面 需要二级路由案列如下

首先要在manifest.json 配置如下
在这里插入图片描述

这个是我在linux 服务器上的路径
在这里插入图片描述

nginx 配置如下
在这里插入图片描述

以上完美解决！ 有需要可以留言讨论 ！ 同进步

npm报错TypeError: this.getOptions is not a function
邓邓子的博客
02-02 1425
1、问题 执行npm run serve报错： TypeError: this.getOptions is not a function 2、解决方法 由于sass-loader版本过高造成的，执行以下命令卸载当前版本安装低版本： npm uninstall sass-loader npm install sass-loader@7.0.1 --save-dev ...
uniapp开发环境搭建及打包H5部署至Nginx
邓邓子的博客
12-23 6849
1、安装HBuild X工具 下载HBuild X工具，下载地址：https://www.dcloud.io/hbuilderx.html 下载解压到指定目录即可使用
uniapp发行H5，并在nginx部署二级域名
weixin_44585148的博客
04-30 3885
先说结论：查看uniapp的h5配置，确定配置正确再发行，nginx的配置网上都是 如果配置了nginx，发现使用二级域名访问报404或页面拒绝访问，问题一般是在uniapp的配置中 nginx配置 nginx中的配置就是加一个location location /xxx { root xxx/xxx/xxx; try_files $uri $uri/ @router; index index.html ...
uni-app打包h5并部署到nginx，路由模式history
最新发布
星月昭铭的博客
03-13 1128
uni-app打包有些坑，当时运行的基础路径填写了./，导致在二级页面刷新之后，页面直接空白。就只能换一个路径了，nginx也要跟着改，下面是具体步骤。
宝塔服务器 如何将uniapp发布到h5并部署
克里斯蒂亚诺更新的博客
07-23 2098
项目创建文件夹：（注意这里root html/**指的是 nginx的根目录）打包成功：（注意如果中途打包不成功失败了，就重启HBuilerX重新打包）注意manifest.json不要动。
nginx部署uniapp的h5项目
一枚小前端
10-27 4956
1.h5配置 2.按图示再点发行 3.将发行出来的h5文件夹命名，在这里，我命名为【answer】 4.在解压后的nginx文件夹内新建一个【mw】文件夹 5.将【answer】文件夹放入【mw】中 6.找到下图的nginx路径中的nginx.conf文件，按图示输入端口和服务器ip location ^~ /answer/ { root mw; autoindex on; autoindex_exact_size on; autoindex_localtime on; } 7.按图示cd到你
阿里云 linux 的nginx 配置uni-app的H5前端项目vue，后端接口阿里云 http 及https
LlanyW的专栏
09-16 1469
下载nginx源码编译之后，在/usr/local/nginx/nginx.conf配置站点信息。在nginx上配置了站点与api代理。
【笔记】uniapp打包H5并通过nginx部署
丘山小月半的博客
12-07 7761
初次使用uniapp打包h5，根据文档配置打包后依然无法直接检查是否打包正确，故决定使用nginx部署一下检查检查，记录步骤如下： 1，新建项目 预览一下我们编辑过的首页 2，h5配置 3，打包 4，nginx配置 在nginx安装目录下找到 nginx.conf 文件，对应配置如下： server { listen 8080; server_name localhost,127.0.0.1; location / { root D:/xxxx/te
nginx部署静态页面(vue/uniapp)+node服务到同一服务器
wangtinger的博客
06-06 1490
通过宝塔面板、STFP等工具，使用nginx将前（uniapp）+ 后端（express框架）项目部署到同一服务器上
uniapp打包为H5部署到Nginx图片无法自适应的解决方法
邓邓子的博客
12-23 1781
问题描述：uniapp打包为H5部署到Nginx后，图片无法自适应，页面显示很乱。 开始以为是代码或uniapp配置的问题，搞了半天！最后从Nginx找到了原因！ 解决方法： nginx.conf文件加上一行： include mime.types; ...
uni-app部署H5项目vue项目到nginx
weixin_42561312的博客
05-26 7627
前言：昨天在捣鼓自己在uniapp写的H5项目部署。最后选择了阿里云+nginx，本篇介绍一下如何部署。 一、安装nginx服务 各位看官也可以参考一下菜鸟教程 Nginx 安装配置；写的比较详细，也很简单，跟着来就行了。 以下简单讲讲我的安装过程，图就不放了: 1.安装nginx的环境 yum -y install make zlib zlib-devel gcc-c++ libtool openssl openssl-devel 2.安装 PCRE 1、下载 PCRE 安装包，下载地址： http:
uniapp 打包 H5，部署nginx
codeMan_Father的博客
01-02 404
【代码】uniapp 打包 H5，部署nginx。
uniapp h5 部署
w710537643的博客
03-13 591
【代码】uniapp h5 部署。
uniapp 打包发布H5 nginx 访问
wcdunf的博客
04-07 5329
第一步：设置manifest.json 源码视图： 第二步：打包
nginx 部署_nginx部署h5项目
weixin_39850920的博客
12-05 1786
1. nginx部署h5项目此为windows部署，liunx也类似的1.1. 前言部署h5项目还是很简单的，不过对小白来讲一开始可能也是一脸懵逼，这个简单教程针对的是从未部署过前后端分离前端项目的小白1.2. 步骤1.2.1. 下载nginx如下图目录1.2.2. 放入经过编译的h5项目把经过编译的h5项目放入html文件夹下，可以在html里面创建一个单独文件夹，把内容放进去如下图1.2.3....
nginx部署h5项目
weixin_33743880的博客
06-06 3074
1. nginx部署h5项目 此为windows部署，liunx也类似的 1.1. 前言 部署h5项目还是很简单的，不过对小白来讲一开始可能也是一脸懵逼，这个简单教程针对的是从未部署过前后端分离前端项目的小白 1.2. 步骤 1.2.1. 下载nginx 如下图目录 1.2.2. 放入经过编译的h5项目 把经过编译的h5项目放入html文件夹下，可以在html里面创建一个单独文件夹，把内容...
ngxin同时部署多个uniapp（H5项目）
azlnhaha的博客
03-07 4300
uniapp 怎么打包成H5应用就不多赘述，这里说一下，怎么一个Nginx 部署多个uniapp，不同路径 manifest.json配置文件，点击H5配置，运行的基础路径配置成 ./ manifest.json配置文件，点击源码视图进行配置修改，代码如下 "h5" : { "template" : "template.h5.html", "router" : { "mode" : "hash", "base" : "./
nginx部署H5端程序与PC端进行区分及代理多个项目及H5内页面刷新出现404问题。
Miketutu的博客
11-12 739
在项目中会碰见需要在nginx代理多个项目，如果在加上uniapp开发的H5端的项目，你还要在nginx中区分PC端和手机H5端，这就会让人很头大！注意，index.html前面必须加你的前端包外层的父级文件夹地址（如果你是把前端包进行区分，也就是说pc和h5的前端包你要做区分，你就必须将两个项目(pc和h5)放在不同的文件夹中进行区分）这个名称你可以随意起，这个主要是你的访问域名需要加这个名称来访问你的项目。例如:https:// xxx.xx.cn:3000/h5 这样就可以访问这个h5的项目。
uniapp打包h5后部署400
02-25
### 解决 UniApp 打包 H5 部署时遇到的 400 错误 当部署 UniApp 应用程序至 Nginx 并遭遇 HTTP 400 坏请求错误时，通常意味着客户端发送了一个不被服务器理解或处理的请求。此问题可能由多种因素引起，包括但不限于 URL 编码不当、HTTP 请求头过大或是路由配置有误。 #### 检查并修正 URL 和参数编码 确保所有的 URL 及其查询字符串都经过正确的百分比编码。未正确转义特殊字符可能会导致浏览器发出不符合标准的请求，从而触发 400 错误响应[^1]。 #### 调整 Nginx 的 `client_max_body_size` 设置 有时上传大文件或其他原因可能导致 POST 数据超出默认允许的最大尺寸，这也会引发 400 错误。可以在 Nginx 配置中适当增加 `client_max_body_size` 参数来解决问题： ```nginx http { ... client_max_body_size 8m; } ``` #### 修改 Nginx 日志级别以便调试 为了更精确地定位问题所在，在开发环境中可以临时提高日志记录等级，帮助捕获更多关于为何发生 400 错误的信息： ```nginx error_log /var/log/nginx/error.log debug; ``` #### 完善前端路由模式设置 对于单页应用 (SPA)，如使用 Vue Router 或类似的库构建的应用，默认情况下它们会尝试匹配所有路径到特定组件。然而，如果不小心设置了错误的历史模式，则可能会造成不必要的重定向循环或者其他形式的无效请求。建议确认是否启用了 HTML5 History Mode，并相应调整 Nginx 配置以支持这种工作方式： ```nginx location /h5/ { alias /www/data/html/h5/; try_files $uri $uri/ /index.html; index index.html index.htm; # 支持HTML5 history mode if (!-e $request_filename){ rewrite ^(.*)$ /index.html break; } } ``` 以上措施有助于减少因前端路由机制引起的潜在冲突，进而降低出现 400 错误的概率[^3]。 #### 清理缓存与重新加载资源 清除本地存储中的旧版本 JavaScript/CSS 文件以及重启服务端进程也是排除此类故障的有效手段之一。这样做能保证最新更改得以生效，同时消除由于过期静态资产所造成的兼容性隐患。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值