每天一点点之vue框架开发 - History 模式下线上路由报404错误

2024-06-07 17:58:30

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

const router = new VueRouter({ mode: 'history', routes: [...] })

当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！

不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。

所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

后端配置例子

Apache

<IfModule mod_rewrite.c>RewriteEngine OnRewriteBase /RewriteRule ^index\.html$ - [L]RewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-dRewriteRule . /index.html [L]
</IfModule>

除了 mod_rewrite，你也可以使用 FallbackResource。

#nginx

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

警告

给个警告，因为这么做以后，你的服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件。为了避免这种情况，你应该在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。

const router = new VueRouter({ mode: 'history', routes: [ { path: '*', component: NotFoundComponent } ] })

或者，如果你使用 Node.js 服务器，你可以用服务端路由匹配到来的 URL，并在没有匹配到路由的时候返回 404，以实现回退。更多详情请查阅 Vue 服务端渲染文档。

转载于:https://www.cnblogs.com/cap-rq/p/10148957.html

每天一点点之vue框架开发 - History 模式下线上路由报404错误相关推荐

每天一点点之vue框架开发 - 部署到线上
1.在项目根目录下运行如下命令 npm run build 会生成一个dist目录, 2.然后将dist目录上传至服务器就可以访问页面了,不需要配置vue环境了. 转载于:https://www.cn ...
每天一点点之vue框架开发 - axios解决跨越问题
每天一点点之vue框架开发 - axios解决跨越问题参考文章: (1)每天一点点之vue框架开发 - axios解决跨越问题 (2)https://www.cnblogs.com/cap-rq/p ...
php项目webpack打包,Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理
这次给大家带来Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理,Vue项目webpack打包部署时Tomcat刷新报404错误问题处理的注意事项有哪些,下面就是实战案例,一起 ...
Vue改用history模式后Nginx代理报404
由于以前VUE采用hash模式: hash -- 即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算) 比如:http://abc.example.com/abc/#/hello, ...
服务器进tp5项目报nginx404错误,TP5框架在nginx环境下路由报404错误解决方法亲测可用...
前段时间给客户写了个TP5框架的后台,主要是API调用,上传到客户服务器后发现首页可用,但所有内页报404错误,网上一搜发现天多一样的问题,但找了很多都是不可用的,而且都是过时的,但最终还是自己试出来 ...
每天一点点之vue框架开发 - vue组件之间传值（父向子传值）
路由文件 {path: '/productListBase', name: 'productListLink', component: ProductListBase, redirect: '/pro ...
每天一点点之vue框架开发 - vue坑-input 的checked渲染问题
选中radio或者checkbox需要注意的是: 不管<input type='radio checked='true''> 你的checked属性值是true或者false,他都会选中 ...
vue框架开发出现页面空白、白屏的解决方法总汇
vue框架开发出现页面空白.白屏的解决方法总汇参考文章: (1)vue框架开发出现页面空白.白屏的解决方法总汇 (2)https://www.cnblogs.com/love314159/artic ...
基于 SpringBoot + Vue 框架开发的网页版聊天室项目
‍ ‍简介微言聊天室是基于前后端分离,采用SpringBoot+Vue框架开发的网页版聊天室.使用了Spring Security安全框架进行密码的加密存储和登录登出等逻辑的处理,以WebSocke ...

最新文章

热门文章