Nginx配置vue项目 报错 Uncaught SyntaxError: Unexpected token

今天部署 VUE发现不能按正常的静态资源文件部署。部署VUE实数没有太多经验，惭愧惭愧。

我以为是静态资源直接用nginx指向一个静态路径即可，发现访问报错 :

Uncaught SyntaxError: Unexpected token <

后面经过发现，VUE是伪静态，而且是单页面 。

当你访问某个资源的时候，然后再去刷新，就会报错404

先调整如下：

    server {
        listen       8081;
        server_name  localhost;

        root   /usr/local/application/nginx/web/build;
        
        location / {
            try_files $uri $uri/ @router;
            index  index.html;
        }
        
        location @router{
            rewrite ^.*$ /index.html last;
        }
        #代理后台接口
        location /api/ {
            proxy_pass http://portalServer/;
            proxy_set_header Host $host:$server_port;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

这里解释一下 try_files ：

当用户请求 http://localhost/example 时，这里的 $uri 就是 /example。 try_files 会到硬盘里尝试找这个文件。如果存在名为 /$root/example（其中 $root 是项目代码安装目录）的文件，就直接把这个文件的内容发送给用户。 显然，目录中没有叫 example 的文件。然后就看 $uri/，增加了一个 /，也就是看有没有名为 /$root/example/ 的目录。 又找不到，就会 fall back 到 try_files 的最后一个选项 /index.php，发起一个内部 “子请求”，也就是相当于 nginx 发起一个 HTTP 请求到 http://localhost/index.php。

rewrite ：

rewrite是实现URL重定向的重要指令，他根据regex(正则表达式)来匹配内容跳转到replacement，结尾是flag标记

参考资料：https://www.cnblogs.com/boundless-sky/p/9459775.html

参考资料：https://www.cnblogs.com/mao2080/p/9340026.html

参考资料：https://www.cnblogs.com/brianzhu/p/8624703.html