Nginx代理Vue项目404问题

在使用nginx代理vue项目时,如果vue项目中使用的vue-router,在刷新项目时就会出现页面404,因为此时vue-router设置路由地址被当作url地址，此时的地址路径肯定不是真实存在的，所以出现404现象。解决方法使用nginx location @方法. 那么nginx的location中的@到底是什么呢? @ 定义一个命名的 location，@ 定义的locaiton名字一般用在内部定向，例如error_page, try_files命令中。它的功能类似于编程中的goto。

参考下面的配置即可解决404问题:

{
    listen 80;
    server_name example.com;
    index index.html index.htm;
    root /var/www/html;

    #vue-router配置
    location / {
        try_files $uri $uri/ @router;
        index index.html;
    }
    location @router {
        rewrite ^.*$ /index.html last;
    }
}