vue路由history模式刷新404问题解决方案_tony_xf的博客-CSDN博客_vue history 404

本站和网页 https://blog.csdn.net/u011025083/article/details/80352301 的作者无关，不对其内容负责。快照谨为网络故障时之索引，不代表被搜索网站的即时页面。

vue路由history模式刷新404问题解决方案_tony_xf的博客-CSDN博客_vue history 404
vue路由history模式刷新404问题解决方案
置顶
tony_xf
于 2018-05-17 16:01:22 发布
74065
收藏
68
分类专栏：
javascript
文章标签：
vue
history
404
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011025083/article/details/80352301
版权
javascript
专栏收录该内容
10 篇文章
0 订阅
订阅专栏
vue单页因微信分享和自动登录需要，对于URL中存在’#’的地址，处理起来比较坑。用history模式就不会存在这样的问题。但是换成history模式，就会有个新的问题，就是页面刷新后，页面就无法显示了（404）。对于这个问题，我们只需要在服务器配置如果URL匹配不到任何静态资源，就跳转到默认的index.html。 我这里是针对nginx的配置，总结如下：
方案一 （这种方式容易被第三方劫持）
location /{
root /data/nginx/html;
index index.html index.htm;
error_page 404 /index.html;
方案二
location /{
root /data/nginx/html;
index index.html index.htm;
if (!-e $request_filename) {
rewrite ^/(.*) /index.html last;
break;
方案三 （vue.js官方教程里提到的https://router.vuejs.org/zh-cn/essentials/history-mode.html）
server {
listen 8888;#默认端口是80，如果端口没被占用可以不用修改
server_name localhost;
root E:/vue/my_project/dist;#vue项目的打包后的dist
location / {
try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
index index.html index.htm;
#对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
#因此需要rewrite到index.html中，然后交给路由在处理请求资源
location @router {
rewrite ^.*$ /index.html last;
#.......其他部分省略
tony_xf
关注
关注
18
点赞
68
收藏
打赏
21
评论
vue路由history模式刷新404问题解决方案
vue单页因微信分享和自动登录需要，对于URL中存在’#’的地址，处理起来比较坑。用history模式就不会存在这样的问题。但是换成history模式，就会有个新的问题，就是页面刷新后，页面就无法显示了（404）。对于这个问题，我们只需要在服务器配置如果URL匹配不到任何静态资源，就跳转到默认的index.html。 我这里是针对nginx的配置，总结如下：方案一 （这种方式容易被第三方劫持...
复制链接
扫一扫
专栏目录
Vue项目History模式404问题解决方法
12-01
本文主要解决Vue项目使用History模式发布到服务器Nginx上刷新页面404问题。（由于每个项目的情况都不尽相同，本方案已经完美解决本在所使用项目，具体情况可能还需要修改。）
1.项目背景分析
本人是Java后台开发，Vue其实使用也没有多久，只能说简单了解。发现问题的时候其实也一头雾水，第一思想就是百度看别人的思路。
1.1 查看项目打包后文件
首先看看项目打包后文件内容，看看有没有什么能突破的地方。文件目录如下：
打眼一看可以发现，主要的可能就是这个index.html文件，内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta
Vue router history模式,404报错
zhaochao0037的博客
10-14
202
Vue router history模式,404报错
评论 21
您还未登录，请先
登录
后发表或查看评论
Vue hash和history两种模式的区别、history模式部署后刷新报404
muzidigbig的博客
12-12
3132
项目本地运行时候，首页子页面刷新均无问题。部署到服务器之后，刷新页面报错、出现404。
当vue项目的vue-router的mode为history路由模式时，若未进行相应的配置，可能会发生这种情况。
前端路由，即由前端来维护一个路由规则。实现有两种，一种时利用url的hash，也就是常说的锚点(#)，JS通过hashChange事件来监听url的改变，IE7及以下需要轮询；另一种是HTML5的History模式，它使url看起来像普通网站那样，以“/”分割，没有#，但页面并没有跳转，不过使用这种模式需
vue项目线上页面刷新报404 解决方法
最新发布
xybhua的博客
11-05
832
vue-router mode 默认为hash, 这样的url中带有#，如果把mode: 'history’就能去掉#号，也可以正常访问，但是再次刷新页面就会出现404错误。
Vue history模式刷新页面404问题
qq_32421489的博客
11-24
4238
为什么会出现404
我们先来看一下我们给到后端的dist文件
可以看到dist下只有一个index.html文件及一些静态资源，这个是因为Vue是单页应用(SPA)，只有一个index.html作为入口文件，其它的路由都是通过JS来进行跳转
接着我们再来分析一下后端nginx的配置
server{
//监听80端口
listen80;
//定义你的站点名称
server_namewebsite.com;
//根据请求URI设置配置
l...
Vue history路由模式 刷新404
m0_46498310的博客
09-03
736
Vue history路由模式 刷新404
当我们使用Vue开发SPA（单页面应用）的时候，需要引入前端路由系统（vue-router）。vue-router是vue.js官方提供的路由插件，它和vue.js是深度集成的。前端路由的核心，就在于 ——** 改变视图的同时不会向后端发出请求。**
在Vue单页面应用中页面切换其实就是组件的切换，vue-router的作用在于将路径和组件联系起来，使得通过不同的路径可以访问到不同的组件。在传统的页面中，我们切换页面是通过a标签来实现，每一次页面切换都需要向后台发
nginx 刷新显示404
lixilai_rjkf的博客
09-16
303
#nginx
location / {
try_files $uri $uri/ /index.html;
HTML5 History 模式
vue-router默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
如果不想要很丑的 hash，我们可以用路由的history 模式，这种模式充分利用history.pushStateAPI 来完成 URL 跳转而无须重新加载页面。
const ro...
解决Vue中使用history路由模式出现404的问题
NetRookieX的博客
11-21
4110
背景
vue中默认的路由模式是hash，会出现烦人的符号#，如http://127.0.0.1/#/。
改为history模式可以解决这个问题，但是有一个坑是：强刷新、回退等操作会出现404。
Vue改用History路由模式
修改src/router/index.js
export default new Router({
mode: 'history',//改为history模式
routes: [
path: '/pub',
component:Emp
vue路由history模式
liuxuanwei1998的博客
07-12
841
vue history模式刷新404原因
weixin_46293668的博客
05-07
6404
项目场景：
提示：这里简述项目相关背景：
vue项目路由history模式
问题描述
提示：这里描述项目中遇到的问题：
vue history模式刷新404原因
原因分析：
因为在history模式下，只是动态的通过js操作window.history来改变浏览器地址栏里的路径，并没有发起http请求，但是当我直接在浏览器里输入这个地址的时候，就一定要对服务器发起http请求，但是这个目标在服务器上又不存在，所以会返回404
解决方案：
第一步
如何切换history模式 在router.js中配置
co
vue路由的两种模式--hash和history
一个憨憨的前端之路
08-24
2934
  大家都知道在vueRouter中，我们可以通过mode来改变路由模式，可选为hash和history。
hash
  hash指的是location里面#以及它后面的部分。也被成为锚点，通常用来定位，它的改变不会造成页面的刷新。
  我们可以通过window.location.hash来获取当前的hash值。
** 拓展：url各部分获取 **
hash设置或返回从井号 (#) 开始的 URL（锚）。
host设置或返回主机名和当前 URL 的端口号。
hostname设置或返回当前 URL 的主
vue history 模式（路由）
热门推荐
qq_41772754的博客
03-24
2万+
vue 里面路由有两种显示模式是hash和history，默认是hash
hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。比如这个 URL：http://www.abc.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重...
nginx解决vue路由history模式刷新404问题
J_Lee
06-28
1998
在nginx上部署vue项目(history模式)；
vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。但是如果我们不想hash这种以#号结尾的路径时候的话，我们可以使用路由的history的模式。比如如下网址：
使用hash模式的话，那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问，如果路由使用 history的话，那么访问的路径变成 如下：
http://localhost
Nginx：vue路由使用history模式刷新404
子昊
02-16
6453
当vue-router使用history模式时，当我们刷新页面或直接访问路径的时候就会返回404，如图。
在history模式下，只是动态的通过js操作window.history来改变浏览器地址栏里的路径，并没有发起http请求，但是当我们直接在浏览器输入这个地址的时候，就会对服务器发起http请求，但是这个目标在服务器上又不存在，所以会返回404。
我们可以通过把所有请求都转发到首页上来解决这个问题。
nginx配置：
location /{
root /website/wenf
vue配置动态路由跳转报404页面解决方案，3个步骤实现，1分钟解决
凌晨冲锋者的博客
11-17
9438
问题：
我们成功配置动态路由，点导航栏没问题，一刷新和输入地址 就出问题跳404页面！
原因：
addRoutes动态添加路由还没完成，页面就从静态找了。 路由生命周期 静态→动态，404是放到静态的所有老报。
解决：
将404路由也动态添加进去！
演示：
这是我报bug的样子
咱们把404路由删了，用一个变量代替
操作步骤一：
操作步骤二：
操作步骤三：
在APP使用created()函数是为了刷新时候调用第二个步骤的方法。
...
vue history模式刷新404原因_vue-cli在 history模式下的配置详解
weixin_42135073的博客
01-22
687
背景：自己搭了vue测试项目，使用的是history模式，放在后台，一开始进入项目没什么问，但是再一刷新页面就404了，what?当时的比较懵逼，为啥呢？因为之前写过项目上线过是好用的啊，这个项目按照那个写的啊，但是解压项目zip文件之后发现，WEB-INF没有引入，瞬间就WC了，为了以防自己犯这种SX的问题浪费时间，所以打算记录下history的配置1、配置router/index.js2、bu...
vue react 路由history模式刷新404问题解决方案
liverse123的博客
03-24
1214
vue react 路由history模式刷新404问题解决方案
解决Vue 项目部署到非根目录方法及刷新页面时找不到资源问题
小破孩的博客
03-24
3350
背景：最近做一个项目打包后需要部署在非根目录的文件夹内进行访问，对于这一问题一开始很是头疼，最后查找和询问同事之后得到如下方法：
1、先解决如何配置非根目录访问的方式，如下：
假设打包后的dist文件内容需要部署到非根目录http.xxx.com/test子路径下，解决步骤如下：
修改vue.config.js中的publicPath
module.exports = {
publicPath: "/test/", //打包后部署在一个子路径上http:xxx/test/
produ
vue路由，history模式的原理
couch potato的博客
02-19
2639
去除url #的方式，每次向服务器请求index.html，再由客户端分析当前url,做不同的变化
router-link会生成a标签，a标签没有#，就会发请求的，为了解决这个问题，需要history
原理：
history.pushState({}, ‘’, url)
该方法用于改变地址栏url,改变地址栏而不跳转
参数1：描述当前跳转的信息，为空即可
参数2：title，一般浏览器用不...
vue项目history路由的配置
weixin_42349568的博客
12-05
1009
一，前端配置
import { createRouter, createWebHistory } from 'vue-router';
const hash = createWebHistory();
const router = createRouter({
history: hash,
// base: "/cd/",
routes: [...]
})
二，npm run build的页面
直接打开的话，只能打开index.html，然后刷新浏览器或者访问哪个页面时，就会报404了。官网原
vue路由模式(hash/history)的选择
weixin_45115895的博客
07-03
1180
vue路由模式的选择
vue-router（前端路由）有两种模式，hash模式和history模式。官方文档上面说了"vue-router 默认 hash 模式",hash 就是指 url 尾巴后的 # 号以及后面的字符，history没有底带#，外观上比hash 模式好看些.
之前创建项目一直用的都是vue-cli2.0版本,没有涉及到路由模式(hash/history)的选择,也就没有想太多,项目也没有遇到过关于此类的问题,vue-cli3.0版本创建项目会让你选择模式,最近想了解一下关于cli3.0的
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
提交
©️2022 CSDN
皮肤主题：大白
设计师：CSDN官方博客
返回首页
tony_xf
CSDN认证博客专家
CSDN认证企业博客
码龄10年
暂无认证
16
原创
21万+
周排名
42万+
总排名
8万+
访问
等级
404
积分
粉丝
20
获赞
23
评论
72
收藏
私信
关注
热门文章
vue路由history模式刷新404问题解决方案
74062
vagrant+virtualbox遇到的坑
4065
手机第三方登录，判断微信浏览器
2394
关于使用element-ui的el-input监听不了回车事件
759
jquery,6位密码输入框效果
755
分类专栏
小程序
1篇
系统运维
2篇
jquery
1篇
html+css
2篇
javascript
10篇
php
2篇
最新评论
vue路由history模式刷新404问题解决方案
weixin_44978755:
location @router {
rewrite ^.*$ /mb/index.html last;
vue路由history模式刷新404问题解决方案
Derek_ccY:
我也遇到了这种问题，题主解决了嘛
vue路由history模式刷新404问题解决方案
kaiking_g:
您好，请问如果 location /mb/{ } 这样配置，该如何处理呢
vue路由history模式刷新404问题解决方案
码农1001号:
第三种完美 可行
vue路由history模式刷新404问题解决方案
wdscript:
# try_files $uri $uri/ /index.html; # 所有404的请求返回index页面
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
提交
最新文章
JavaScript 正则表达式上——基本语法
小程序textarea穿透问题解决方案
css3自定义滚动条样式
2021年1篇
2020年2篇
2018年2篇
2017年11篇
2016年1篇
目录
目录
分类专栏
小程序
1篇
系统运维
2篇
jquery
1篇
html+css
2篇
javascript
10篇
php
2篇
目录
评论 21
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
打赏作者
tony_xf
你的鼓励将是我创作的最大动力
¥2
¥4
¥6
¥10
¥20
输入1-500的整数
余额支付
(余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付
您的余额不足，请更换扫码支付或充值
打赏作者
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。 2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。
余额充值