uniapp history 模式本地开发正常，线上H5在nginx下页面空白、微信回调或者刷新出现404

看守牧场的狼

于 2022-03-18 11:31:22 发布

阅读量3.3k

点赞数

文章标签： nginx 微信服务器 vue uniapp

本文链接：https://blog.youkuaiyun.com/w263756314/article/details/123570319

版权

博客作者在部署Vue.js应用时遇到线上页面在微信登录回调后显示404的问题。经过排查，问题出在HBuilder的打包配置和服务器（nginx/apache）的配置上。解决方案包括确保nginx配置加载最新设置，检查H5及manifest.json的配置，并针对Vue.js的history模式调整服务器路由设置，以正确处理所有路由请求。通过修改服务器配置，成功解决了404错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本地开发中完全正常，打包发布到线上发现页面在微信登录回调后出现 404

一、怀疑是nginx站点配置文件没有加载最新

尝试解决

SSH 进服务器查看是否有多个nginx主进程
重启nginx

二、怀疑是HBuilder在打包之前没有配置好

尝试解决

检查 H5配置
源码视图检查 manifest.json
路由检查发现模式是 history:
"router" : { "base" : "/mobile/", "mode" : "history" },

最终解决:配置修改

https://router.vuejs.org/zh/guide/essentials/history-mode.html

nginx

location / {
  try_files $uri $uri/ /index.html;
}

apache

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>