nginx部署前端项目，把前端URL当成后台请求了

0.背景

用vue或者angular写了一个前端项目，本地正常运行，因为vue和angular都有自己的路由系统，我们访问页面时通过配置来确定是否使用’#’来表示前台路由信息。

比如下面这两个路由地址：

localhost:4200/stu?id=3

localhost:4200/#/stu?id=3

这两个路由地址都是前台地址，而id=3是路由参数。

如果此时用nginx代理前台来访问，则会出现问题。

localhost:4200/#/stu?id=3 这个地址，nginx默认不进行解析，这时访问就正常。

localhost:4200/stu?id=3这个地址，nginx如果没有特别配置的话，nginx会将这个地址当作一个后台的get地址进行请求，而不会当成一个前台的url进行访问。

1.解决办法

我们需要简单配置一下nginx，我们首先打开nginx的配置文件，然后参考下面进行修改

  server {
        listen       80;
        server_name  localhost;

        location / {
            root   /www/dist;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
}

其中，root指向的前端静态文件的根目录。

try_files :设置文件查找规则为 $uri $uri/ /index.html。即3个规则，先从 $uri 查找，再从 $uri/ 目录中查找，最后查找 /index.html。

这样的话访问localhost/stu?id=3 的时候，nginx就会当成前台地址不会当成后台get请求进行解析了。