uniapp发布为h5以及如何访问路由（非首页）

最新推荐文章于 2024-09-20 14:46:38 发布
最新推荐文章于 2024-09-20 14:46:38 发布
阅读量7.4k 收藏 10
点赞数 1
分类专栏： 小程序-uniapp 文章标签： html5 html http
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36981190/article/details/120655102
版权
本文档介绍了在uniapp中遇到的发布H5应用后，只有首页可访问而其他路由不可达的问题。通过分析和尝试，发现需要将uniapp的路由模式设为hash或配置ngix服务器，尤其是对于history模式，必须在ngix中添加try_files指令以正确处理路由。此外，还提到了可以通过开通自己的uniapp网页托管来测试应用。
摘要由CSDN通过智能技术生成

这里写目录标题

1、发布到本地ngix服务器无法访问路由（非首页）背景：

用uniapp写一个工程，包括两个页面（隐私协议和用户协议），最后发布到网页托管服务器上，通过网页链接访问这两个页面

1.1、uniapp工程配置

在uniapp的内置服务器可以访问其他页面，但是放在ngix服务器上发现只能访问首页，无法访问其他页面

一、uniapp的h5设置为history，本来在uniapp上编译完可以正常访问，如下
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
现在将其发布为h5网站，放到ngix服务器下，发现只能访问首页

1.2、经过各种尝试，发现设置为hash模式时，将其放到服务器下可以正常访问

1.3、后来发现history需要ngix后台做一些配置才能正常访问

参考history官方讲解：

最低0.47元/天 解锁文章
雨中世界
关注
专栏目录
uni-app - 详细实现 H5 端获取当前页面的路由和参数（得到当前页面地址的路径 URL）
王佳斌
12-18 1万+
Uniapp怎么获取当前页面路由，uniapp获取当前路由地址，uniapp获取当前页面的路径，UNI-APP_uni-app获取当前页面路由，uni-app获取当前url地址参数，uni-app如何获取当前页面路由，uniapp获取当前页面路由及参数，uniapp获取当前页面传递的参数及路由的方法，uniapp获取当前页面路由及参数获取Uni-app页面路由的方式，在uniapp、mpvue、vue(h5)中如何获取当前页面和地址栏，uniapp获取当前路由的参数 并且加入到缓存，uniapp获取当前页面
uniapp - 实现 H5 网站项目路由跳转页面时增加动画效果，给手机移动端网页的所有页面加入跳页动画效果（直接引入核心方法即可全局生效，无需每页都引入，引入一次即可，高效简洁无 BUG）详细解决
王佳斌
04-01 4653
uniapp的h5网页项目切换页面怎么加动画，uniapp h5如何在切换路由改变页面时加动画过渡，uniapp h5页面跳转翻页效果，uniapp 怎么给h5网站加入像app那样的页面切换效果，uniapp H5网站窗口翻页动画，uniapp h5怎么自定义页面跳转切换动画，uniapp设置页面跳转效果，uniapp开发h5页面跳转动画，uni-app切换页面动画效果如何修改，uniapp滑动切换页面，uniappH5页面动画切换组件，uniapp h5页面切换的动画过渡，uni-app h5公众号页面切
uniapp 打包h5路由模式history配置
weixin_44714325的博客
01-25 1万+
我们使用hash模式时，打包线上，容易出现页面空白的情况，所以如下配置 "h5" : { "devServer" : { "publicPath":"./" "https" : false, "port" : 3000, "disableHostCheck" : true, "proxy" : { "/api" : {
uni-app页面调用接口和路由（四）
最新发布
chengcheng9876的博客
09-20 1182
uni-app页面调用接口和路由（四）
uniapp在H5配置hash路由+导航守卫
weixin_52830464的博客
05-27 828
在根目录下创建router/whiteList.js 定义白名单路径。
解决uniapp h5 本地代理实现跨域访问及如何配置开发环境
林恒的博客
06-21 1921
如何解决uniapp H5本地代理实现跨域访问？
uniapp-h5：uni-simple-router添加全局路由拦截（4步）
qq_38969618的博客
10-23 4502
二、配置vue.config.js 三、新建router.js 四、在main.js中引入router.js 之前旧的实现（不推荐）：第1步：下载路由拦截器插件uni-simple-router和自动构建路由表插件uni-read-pages。 第2步：在vue.config.js文件中配置如下代码： 第3步：在src-》router目录下新建index.js 第4步：修改main.js文件即可。（ 修改步骤：import引入路由->use安装路由->执行RouterM
uniapp 路由模式 history
初心
09-22 1870
【代码】uniapp 路由模式 history。
uni-app - 最新实现将 uniapp 项目打包编译为 H5 网站，并上传部署到 web 服务器进行发布预览（从打包到发布完整流程步骤，Hbuilder 编译打包 h5 发行到 web 服务器）
王佳斌
03-06 1万+
uniapp，打包h5，打包编译H5网站，怎么打包h5，uniapp打包成H5部署到服务器教程，uniapp打包H5页面发布到服务器，uniapp开发,打包成H5部署到服务器_uniapp 打包h5，uniapp如何打包h5项目，怎么把项目打包成H5，uniapp如何打包成H5并且放到web端上，打包成h5部署到服务器的步骤，打包发行到h5报错怎么办，如何将uniapp打包的h5网站放到服务器上，编译打包后怎么放到web服务器中，如何将uniapp开发的H5打包并部署到服务器，部署使用uniapp开发的h5
uni-app - H5 页面路由不存在时，跳转到自己定制的 404.vue 页面（当路由不存在时自动重定向到自定义的 404 组件）超详细简约高效的解决方案
王佳斌
11-17 4076
uni-app H5中重定向404页面的方法，uniapp H5页面404怎么做，UNI-APP H5中重定向 404 页面的方法，【uniApp】不存在路由重定向至404页面，如何在动态路由上创建404页uni-app方法，uni-app 并处理动态页面的 API 404 响应，uniapp中重定向404页面的方法uniapp配置路由404，uniAPP 404错误页面应重定向到首页，uniapp H5当路由不存在时怎么跳转到404页面，uniapp 写H5项目实现路由不存在时跳转到自己做的404页面，u
uni-app项目打包成H5部署到服务器(超详细步骤)
热门推荐
weixin_49577940的博客
06-19 3万+
咳咳, 第一次写博客, 有点激动, 因为昨天学了个新技术, 也一直是我之前最不懂的一块, 就是项目做完后如何部署到服务器,昨天尝试了部署uni-app项目, 成功之后很开心, 后面又自己shangw
Vue Cli 3 搭建单页应用项目刷新 404 问题 解决方案（以Apache为例）
zzzhumengfan的博客
03-10 1701
vue 项目 版本 Vue Cli 3.3 官方文档https://router.vuejs.org/zh/guide/essentials/history-mode.html 因为本项目部署在Apache Tomcat上 所以以Apache为例 修改Apache配置 找到 #LoadModule rewrite_module modules/mod_rewrite.so 这...
uniapp h5项目打包 路径配置
yangqii的博客
11-15 2万+
两个简单的移动端页面选择了用uniapp写，果然很复杂了。。 隐藏导航栏，，想通过URL直接链接对应的页面，即打包之后修改首页路径配上想要的页面的文件名 本地运行（localhost）该方法可用， 同样的方法挂到服务器上，直接报错找不到该路径 各种尝试，还是不懂要怎么独立切换页面，最后采用偏方： 每个页面独立打包一份，再挂载到服务器上 如果不想重新建独立工程的话，可以仅修改 pages...
uniapp 使用history模式下H5&PC能直接访问项目内地址
weixin_44482345的博客
11-17 2805
这里写自定义目录标题欢迎使用Markdown编辑器代码HBuilder发行打包最后一步在服务器的根目录下创建.htaccess文件 欢迎使用Markdown编辑器 uniapp项目 根目录下找到manifest.json 进入 源码视图 代码 "h5" : { "devServer" : { // "publicPath":"./" //注意隐藏这行 "https" : false, "port" : 8080,
uni-app路由
上庸者-不服周
11-02 4644
uni-app。
uniapp H5 跳转应用外页面
YL
07-26 9261
当我们在开发中遇到跳转外部链接时，以上方式就不能满足了。今天在开发中就遇到了，在官方文档上看到了web-view，需要新建组件，然后在页面中引入在使用uni.navigateTo来实现页面跳转，感觉有点麻烦，就没采用。最终使用window.location.href来实现的。需求是在H5中循环列表绑定点击事件，分别跳转不同的外部链接，链接是后端提供的接口中有字段。这样就可以实现了跳转外部链接了。...
uniapp打包H5,nginx部署无法读取/static目录下index.xxxxx.css
weixin_41463944的博客
03-19 780
uniapp打包H5,nginx部署无法读取/static目录下index.xxxxx.css
【uniapp】uniapp打包H5（网页端）：
SunPeng的博客
08-10 5624
【uniapp】uniapp打包H5（网页端）：
uni-app使用web-view与web-view内嵌H5页面进行路由跳转的实现方法
Wuyo_7的博客
09-14 7480
uni-app使用web-view与web-view内部H5页面进行通信交互的方法 近期有业务需求，需要在uniapp中的构建的微信小程序嵌入另一个uniapp构建的h5页面进行交互的需求，翻了官方文档，发现官方文档的例子仅仅是针对原生html的，在无数次的试错之后，学会了在uniapp中引入uniwebview的方法，故记录一下。 1.在uniapp的H5项目中创建入口index.html文件 项目根目录下打开manifest.json文件，创建模板路径。 2.在index.html文件下引入官方示例的文
uniapp生成的h5页面，在浏览器访问，返回按钮失效是什么原因
05-23
在浏览器中访问uniapp生成的h5页面时，如果返回按钮失效，可能是由于以下原因： 1. 路由配置问题：检查路由配置是否正确，确保路由可以正常跳转。 2. 历史记录问题：检查浏览器是否支持HTML5历史记录API，如果不支持，返回按钮可能无法正常工作。 3. 缓存问题：部分浏览器会对页面进行缓存，使得返回按钮失效。可以尝试在页面头部添加如下代码，禁用缓存： ``` <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="0" /> ``` 4. JavaScript问题：部分JS代码可能会影响返回按钮的功能。可以检查页面中的JS代码，确认是否存在问题。 如果以上方法都无法解决问题，可以考虑使用uniapp提供的导航栏组件，它可以自动处理返回按钮的功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值