Nginx03 root、alias与try_files

rootaliastry_files的配置与应用。

rootalias的区别

rootalias的区别主要在于Nginx如何解释location后面的路径的URI,这会使两者分别以不同的方式将请求映射到服务器文件上。具体来看:

  • root的处理结果是:root路径+location路径
  • alias的处理结果是:使用alias路径替换location路径

例如,如下的Nginx配置:

1
2
3
4
5
6
7
server {
listen 9001;
server_name localhost;
location /hello {
root /usr/local/var/www/;
}
}

在请求http://localhost:9001/hello/时,服务器返回的路径地址应该是/usr/local/var/www/hello/index.html

当使用alias时:

1
2
3
4
5
6
7
server {
listen 9001;
server_name localhost;
location /hello {
alias /usr/local/var/www/;
}
}

在请求http://localhost:9001/hello/时,服务器返回的路径地址应该是/usr/local/var/www/index.html(用alias后面的路径将请求的location的地址hello替换掉)

另外,要注意的是,alias路径后面必须使用/结束,否则无法匹配正确的路径,而root后则可有可无。所以建议都加上/,反之出错

try_files

接触到try_files,是在对vue-router进行History模式进行配置时,官网给出的例子中使用到了try_files

1
2
3
location / {
try_files $uri $uri/ /index.html;
}

try_files的作用就是在匹配location的路径时,如果没有匹配到对应的路径的话,提供一个回退的方案,在上面的例子中:$uri就代表匹配到的路径。例如我们访问/demo时,$uri就是demo

try_files的最后一个参数是回退方案,前两个参数的意思是,保证如果能够匹配到路径的话访问匹配到的路径,例如访问/demo时,如果根路径下没有demo目录,就会访问index.html

要注意到的是,/index.html的服务器路径,会到root路径下去寻找,上面的例子中,没有root选项,那么就会到Nginx的默认根路径下去寻找index.html,如果设置了root: a,那么就会到服务器的/a/index.html路径下去匹配

在非根路径下使用try_files

当我们希望在/test路径下部署一个路由使用History的Vue应用,那么可以使用如下的Nginx配置:

1
2
3
4
5
6
7
8
9
server {
listen 9001;
server_name localhost;
location /test {
root /usr/local/var/www/hello/;
index index.html;
try_files $uri $uri/ /test/index.html;
}
}

这个时候:

  • /test路径下的请求,不会收到上面的配置的影响
  • 当访问/test时,会使用root的匹配规则,到服务器/usr/local/var/www/hello/test路径下寻找index.html文件
  • 当访问/test/demo1时,会使用try_files的匹配规则,到root路径下去寻找最后一个参数/test/index.html的回退方案,也就是说去/usr/local/var/www/hello/test路径下寻找index.html文件

除了Nginx的配置外,Vue应用本身还需要配置两处:

(1)vue-router实例化时指定history模式,并添加base参数:

1
2
3
4
5
const router = new Router({
routes,
mode: 'history',
base: '/test'
});

(2)静态资源的目录publicPath设置为相对路径(否则回去绝对路径下寻找JS等静态资源)

1
2
3
{
assetsPublicPath: './'
}

参考

哆啦斯基周 wechat
我的公众号,看心情更新,欢迎订阅!