nginx 部署前端Vue项目后,路由出现 404 的问题

谁践踏了优雅 2022-12-18 00:49 142阅读 0赞

**当一个请求带上路由然后回车，就会出现404的问题**  
  
前端出现问题，如图所示：  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjkxOTI5_size_16_color_FFFFFF_t_70][]  
在请求中可以看到404，如图所示  
  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjkxOTI5_size_16_color_FFFFFF_t_70 1][]  
  
**nginx 错误日志如下：**  
2020/10/24 15:34:25 \[error\] 30952\#0: \*51400779 open() "/usr/local/web\_project/school\_web/chat-question" failed (2: **No such file or directory**), client: 119.23.123.164, server: test.xxx.com, request: "GET /chat-question?course\_id=334&course\_lesson\_id=2963&course\_period\_id=526&from\_type=1&hash=1603524864518 HTTP/1.1", host: "test.xxx.com"  
  
![20201024155431891.png][]  
  
**解决方法如下：**  
在nginx.conf 中增加如下内容

server \{  
    listen      80;  
    server\_name example.com;

location / \{  
       root /home/example/dist;  
       try\_files $uri $uri/ @router; \# 配置使用路由  
       index  index.html index.htm;  
    \}  
      
   \# 路由配置信息  
   location @router \{  
     rewrite ^.\*$ /index.html last;  
   \}  
\}  
  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjkxOTI5_size_16_color_FFFFFF_t_70 2][]  
设置完成后，重启nginx，然后在游览器中回车，然后查询到请求如下  
  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjkxOTI5_size_16_color_FFFFFF_t_70 3][]  
**问题就解决了，从此nginx 错误日志再也不打印Vue路由问题找不到目录，前端请求也不报404了**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjkxOTI5_size_16_color_FFFFFF_t_70]: /images/20221122/e6b186fc544a4d9ea82bdfe756785a67.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjkxOTI5_size_16_color_FFFFFF_t_70 1]: /images/20221122/4c74466dd24c4e3ca29f95fa4369dfd6.png
[20201024155431891.png]: /images/20221122/de5e1e6f08934d628e01158a333263b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjkxOTI5_size_16_color_FFFFFF_t_70 2]: /images/20221122/d098559934fc46be8416d55cdc7ec2ef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjkxOTI5_size_16_color_FFFFFF_t_70 3]: /images/20221122/c71c0a6c88914dc1ae5893bb815f4acf.png