配置方法_Vue Router history模式的配置方法及其原理

作者：ryougifujino 

原文：https://segmentfault.com/a/1190000019391139

vue-router

分为

hash

和

history

模式，前者为其默认模式，url的表现形式为

http://yoursite.com#home

，比较难看。后者的url表现形式为

http://yoursite.com/home

，比较美观。

但如果要使用

history

模式，我们需要在后端进行额外配置。本文将讨论如何配置以及为什么要这样配置。

history

模式的配置方法

我们来看看官方文档是教我们怎么配置的：HTML5 History 模式。

首先要将

mode

设置为

history

：

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

然后设置后端(这里采用的nginx)：

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

然后就......没了！显然官方的教程讲的比较简略，并且我们参照这个教程实际上还是会遇到一些问题。

history

模式的配置实践及原理

强烈建议：阅读这部分之前，先看一下nginx的这部分文档和这部分文档。

既然官方文档教我们这样做了，我们就按照它说的来实践一下。

只配置前端的情况

首先，我们将

mode

设置为

history

，但不配置后端。然后，假如我们的路由是长这个样子的：

const routes = [
    {path: '/home', component: Home},
    {path: '/', redirect: '/home'}
];
           

我们用nginx部署项目，然后在地址栏输入

http://localhost:8080

(这里配置的端口是8080)，你会发现地址栏之后会变为

http://localhost:8080/home

，并且看起来一切正常，似乎路由也可以正常切换而不会发生其他问题(实际上会发生问题，后面会进行讨论)。看起来好像不需要按官网告诉我们的那样配置后端也能实现

history

模式，但如果你直接在地址栏输入

http://localhost:8080/home

，你会发现你获得了一个404页面。

那么

http://localhost:8080

为什么可以(部分)正常显示呢？道理其实很简单，你访问

http://localhost:8080

时，静态服务器(这里是nginx)会默认去目标目录(这里为

location

中

root

所指定的目录)下寻找

index.html

(这是nginx在端口后没有额外路径时的默认行为)，目标目录下有这个文件吗？有！然后静态服务器返回给你这个文件，配合

vue-router

进行转发，自然可以(部分)正常显示。

但如果直接访问

http://localhost:8080/home

，静态服务器会去目标目录下寻找

home

文件，目标目录下有这个文件吗？没有！所以自然就404了。

配置后端

为了达到直接访问

http://localhost:8080/home

也可以成功的目的，我们需要对后端(这里即nginx)进行一些配置。

首先想想，要怎样才能达到这个目的呢？

在传统的

hash

模式中(

http://localhost:8080#home

)，即使不需要配置，静态服务器始终会去寻找

index.html

并返回给我们，然后

vue-router

会获取

#

后面的字符作为参数，对前端页面进行变换。

类比一下，在

history

模式中，我们所想要的情况就是：输入

http://localhost:8080/home

，但最终返回的也是

index.html

，然后

vue-router

会获取

home

作为参数，对前端页面进行变换。那么在nginx中，谁能做到这件事呢？答案就是

try_files

。

首先看一下try_files的语法：try_files file ... uri;

然后看一下官方文档对它的介绍：

Checks the existence of files in the specified order and uses the first found file for request processing; the processing is performed in the current context. The path to a file is constructed from the file parameter according to the root and alias directives. It is possible to check directory’s existence by specifying a slash at the end of a name, e.g. “$uri/”. If none of the files were found, an internal redirect to the uri specified in the last parameter is made.

大意就是它会按照

try_files

后面的参数依次去匹配

root

中对应的文件或文件夹。如果匹配到的是一个文件，那么将返回这个文件；如果匹配到的是一个文件夹，那么将返回这个文件夹中

index

指令指定的文件。最后一个

uri

参数将作为前面没有匹配到的fallback。(注意

try_files

指令至少需要两个参数)

拿我自己的网站举个例子：

location / { 
root            /data/www/rf-blog-web; 
index           index.html; 
try_files       $uri $uri/ /index.html; 
}
           

$uri

是nginx中的变量，比如我访问的网址是

http://localhost:8080/home

，那么它就代表的

/home

。

在

rf-blog-web

这个目录中，没有子目录，只有一个

index.html

和一些压缩后的名称是hash值的.js文件。当我们请求

http://localhost:8080/home

这个地址时，首先查找有无

home

这个文件，没有；再查找有无

home

目录，也没有。所以最终会定位到第三个参数从而返回

index.html

，按照这个规则，所有路由里的url路径最后都会定位到

index.html

。

vue-router

再获取参数进行前端页面的变换，至此，我们已经可以通过

http://localhost:8080/home

这个地址进行成功地访问了。

而

$uri

这个参数的作用其实是匹配那些.js文件用的，而

$uri/

在这个例子中并没有多大用，实际上是可以去掉的。

history

模式下可能会遇到的问题及解决方案

在将我的项目(在路由中用了懒加载)改为

history

模式的过程中，有时候发现会出现chunk加载出错的情况，打开chrome的network发现那个chunk加载404了，是因为请求的url中多了一层路径。我在这里发现了解决方案。

LinusBorg说，因为在

history

模式中切换路由时，我们是真正改变了页面的url路径，所以webpack的runtime会认为它位于

example.com/some/path

。如果

publicPath

是设置的相对路径，那么webpack加载chunk时可能会变成

example.com/some/path/static/js/3.js

这样的路径，然而chunk的真正路径是

example.com/static/js/3.js

，所以我们需要将

publicPath

设置为绝对路径(

publicPath: '/'

)来解决这个问题。

推荐阅读

1. Vue scoped与深度选择器deep的原理
2. Vue.js 组件复用和扩展之道
3. 【深入vue】为什么Vue3.0不再使用defineProperty实现数据监听？
4. 带你五步学会Vue SSR
5. Vue3 新增API

❤️爱心三连击

1.看到这里了就点个在看支持下吧，你的「点赞，在看」是我创作的动力。

2.关注公众号

前端名狮

，回复「1」加入前端交流群，一起学习进步！

3.也可添加微信【qq1248351595】，一起成长。

“在看转发”是最大的支持