官网说明:

https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E8%AD%A6%E5%91%8A

在linux下搭建nginx测试网页的时候,正常打开可以访问,当刷新后页面出现404 not found的问题

说明:

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 On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>

nginx

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

Node.js (Express)
https://github.com/bripkens/connect-history-api-fallback
警告
给个警告,因为这么做以后,你的服务器就不再返回 404 错误页面,因为对于所有路径都会返回 index.html 文件。为了避免这种情况,你应该在 Vue 应用里面覆盖所有的路由情况,然后在给出一个 404 页面。

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

或者,如果你是用 Node.js 作后台,可以使用服务端的路由来匹配 URL,当没有匹配到路由的时候返回 404,从而实现 fallback。

IIS的处理方法

1.安装url重写模块,找到管理下的web平台安装程序,搜索url,选择url重写工具2.0,选择安装。

2.添加规则。点击url重写,选择添加规则,空白规则,输入名称,按照下图进行配置。

3.vue程序中添加两条路由。

下面总结下:

url重写设置中,将配置url选择为与模式匹配,模式中填入*,使用选项选择通配符;即表示所有的网站都通过此模式进行检查匹配。匹配的条件是下面的条件选项,我们选择的是不是文件,逻辑分组为全部匹配。

操作为重写到我们的index.html(根据情况,设置为自己的单页面应用首页)。以上操作是设置我们的页面请求为先检查有没有此文件,没有此文件全部重写到我们的首页中,从而能够是的我们的自定义路由起作用。

然后我们在vue程序中设置/index.html路径为我们的起始页面,并且定义404页面。至此完成设置。

nignx部署Vue单页面刷新路由404问题解决的更多相关文章

  1. Vue 部署IIS 单页面刷新报404问题

    参考地址: https://blog.csdn.net/yinjing8435/article/details/71274416

  2. vue 在nginx下页面刷新出现404问题解决和在nginx下页面加载了js但是页面显示空白问题解决

    一.vue 在nginx下页面刷新出现404 在网上翻遍了所有这样问题的解决办法,全都是一个解决办法也是正确的解决办法,(后来在vue官网上关于history方式出现404解决方法也是这样说的),只是 ...

  3. IIS部署vue项目页面刷新404,url重写问题解决办法

    这里需要用到URL重写工具 --URL Rewrite(默认没有,需要自己下载安装) 如果IIS上默认有安装Web平台安装程序,我们可以使用平台自动安装URL Rewrite重写工具,打开IIS在管理 ...

  4. nginx部署vue前端,刷新出现404或者500错误的解决方案

    在nginx配置文件的server下加上 try_files $uri $uri/ /index.html; 不加的话是404,路径错误是500,这里的路径只要照着/index.html就行,不用加上 ...

  5. [转] 2017-11-20 发布 另辟蹊径:vue单页面,多路由,前进刷新,后退不刷新

    目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...

  6. 另辟蹊径:vue单页面,多路由,前进刷新,后退不刷新

    目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...

  7. Vue 子路由 与 单页面多路由 的区别

    本文地址:http://www.cnblogs.com/veinyin/p/7911292.html 最近学完了基础课程,打算整理一波笔记,对基本概念梳理一遍,惊觉对子路由和单页面多路由混淆的一塌糊涂 ...

  8. vue单页面打包文件大?首次加载慢?按需加载?是你打开方式不对

    部署各vue项目,走了一遍坑.... vue单页面应用刷新404 找到nginx多网站配置文件:类似nginx/sites-available/www.baidu.com server { liste ...

  9. 解决angular2页面刷新后报404错误

    如果你的angular项目部署到一个tomcat容器里面,localhost:8080是JavaWeb的主页,localhost:8080/driver/login是你angular2项目的登陆地址. ...

随机推荐

  1. 专题1:记忆化搜索/DAG问题/基础动态规划

      A OpenJ_Bailian 1088 滑雪     B OpenJ_Bailian 1579 Function Run Fun     C HDU 1078 FatMouse and Chee ...

  2. Zabbix3.0.4监控Windows的CPU使用百分比并在CPU使用率超过90%触发报警

    Zabbix3.0.4监控Windows的CPU使用百分比 Zabbix 自带的模块没有 CPU 使用率(百分比)这个监控项,我们可以通过添加计数器的方式实现 CPU 百分比的监控. 1.在Zabbi ...

  3. Laravel 怎么在 blade 视图中将带 HTML 字符原样输出

    ### 感觉这是比较细小的,细节处理问题,很容易就一下子想不起怎么处理 但知道处理方式是那么简单时,真的觉得基础不够扎实 ### 富文本编辑内容: 视图原样输出: 视图模板的标签是这样处理就可以的-- ...

  4. Maven多模块项目加载

      Maven多模块项目中如何让Spring运行时成功加载指定的子模块   将子模块pom加入到父模块pom的定义中,并继承父模块   在web.xml中配置加载子模块的Spring配置文件   在启 ...

  5. MYSQL事务处理失效原因

    mysql有多种存储引擎,有些版本(mysql5.5.5以前默认是MyISAM,mysql5.5.5以后默认是InnoDB)安装时默认的存储引擎是MyISAM,而MyISAM存储引擎是不支持事务处理的 ...

  6. 4)协程一(yeild)

    一:什么协程 协程: coroutine/coro - 轻量级线程(一个线程) - 调度由用户控制 - 有独立的寄存器上下文和栈 - 切换时保存状态,回来时恢复 二:协程和多线程比较 协程: coro ...

  7. Confluence 6 管理协同编辑 - 修改编辑模式

    编辑模式确定了你站点所有用户使用协同编辑的体验,这个是你对协同编辑进行启用和关闭的地方. 希望修改编辑模式: 进入  > 基本配置(General Configuration) > 协同编 ...

  8. Confluence 6 数据中心的缓存

    在 Confluence 数据中心(集群)你需要分布缓存和每一个节点的缓存.在集群管理界面,将会定义分布缓存和节点本地缓存. 缓存配置文件存储在集群共享目录中的 home 目录下面. https:// ...

  9. CSS----注释的坑

    css 中 style 注释 需要用  /*   */ 第一种方法注释,结果是不正确的,css布局会出现问题 第二种方式注释正确,布局不会出现问题

  10. CentOS下将Python的版本升级为3.x

    本文主要介绍在Linux(CentOS)下将Python的版本升级为3.x的方法 众所周知,在2020年python官方将不再支持2.7版本的python,所以使用3.x版本的python是必要的,但 ...