h5 页面刷新,报404

### H5 页面刷新报错 404 的原因 H5 页面刷新时出现 404 错误通常是因为服务器配置不当，特别是在使用 HTML5 History 模式的 Vue 路由器时。这种模式下，URL 不再带有 `#` 符号，而是采用更美观的路径形式。然而，这也会导致页面刷新时请求发送给服务器而不是客户端路由器处理。 ### 解决方案 #### 修改路由配置 一种简单的解决方案是将路由模式改为 hash 模式。这种方式不会改变 URL 外观太多，并且可以避免服务器端配置复杂度： ```javascript const router = new VueRouter({ mode: 'hash', // 使用 hash 模式代替 history 模式 routes: [...] }) ``` 这种方法适用于不需要 SEO 或者对 URL 形式要求不高的场景[^1]。 #### 配置服务器 对于希望保留 HTML5 History 模式的开发者来说，可以通过调整 Web 服务器设置来解决问题。以下是几种常见服务器的具体做法： ##### Apache 编辑 `.htaccess` 文件，在根目录添加如下规则以重定向所有请求至 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> ``` ##### Nginx 在 nginx.conf 中加入 location 匹配规则，确保任何未找到文件夹或文件的情况下都返回 main page: ```nginx server { listen 80; server_name localhost; location / { try_files $uri $uri/ /index.html; } } ``` ##### Tomcat 如果应用程序部署于 Tomcat 上，则可以在项目的 `WEB-INF/web.xml` 添加以下配置项： ```xml <error-page> <error-code>404</error-code> <location>/index.html</location> </error-page> ``` 或者通过修改 Tomcat 的 conf/context.xml 来实现全局级别的转发： ```xml <Context ... > ... <Valve className="org.apache.catalina.valves.rewrite.RewriteValve"/> </Context> ``` 并创建一个 rewrite.config 文件用于定义具体的重写规则][^[^23]。 ### iOS 版微信 H5 页面特殊处理 考虑到某些情况下特别是移动端浏览器可能存在兼容性问题，比如 iOS 微信内置浏览器下的特殊情况，还可以考虑在路由钩子函数中做额外判断和处理： ```javascript router.beforeEach((to, from, next) => { const u = navigator.userAgent; const isIOS = !!u.match(/\i[^;]+;(U;)? CPU.+Mac OS X/); // 判断是否为 iOS 设备 if (isIOS && to.path !== location.pathname) { location.assign(to.fullPath); } else { next(); } }); ``` 此段代码会在每次导航前检查当前环境是否为 iOS 终端，如果是则强制更新地址栏中的 URL 地址[^4]。