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

2020-06-14 06:27:52易采站长站整理
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