nginx rewrite之于vue的特殊性

Nginx rewrite not work when it comes to vue.

前两日有一个需求，将所有uri前缀是/con的请求做转发。于是在nginx配了rewrite permanent，例如以下:

location /cont {
    rewrite ^/(.*)$ /contact permanent;
    #return 403;
 }

reload之后，发现不生效，还是之前的跳转情况，自动跳转入登陆页。尝试修改了多次，依然不见效。

F12查看，网络请求状态码没有变成301。改成return 403后，依然如此。

关键点来了，打开nginx accesslog查看，跳转时并没有请求nginx。

这时才想起来vue自身的routing。vue做为单页面前端，在第一次进入页面时，加载了核心组件，包括routing，之后的页面路由由vue自己控制。

验证如下，在服务器上直接curl请求/con，发现能够正常返回301或403。

所以，对于vue的项目，需要做url转发时，需要编码在vue工程内实现，示例如下：

if (to.path != '/contact' && to.path.startsWith('/con')) {
    next({ path: '/contact' })
}

Vue scoped