nginx同时部署多个vue项目后请求刷新一直转圈

Posted 2023-05-05

在nginx中部署多个vue项目，并进行访问时，如果请求刷新一直转圈，可能是由于nginx的缓存配置问题引起的。

首先，你可以查看nginx的配置文件（默认是nginx.conf文件），确认是否开启了缓存功能。如果开启了缓存，那么在请求刷新时，可能会因为缓存未过期而一直等待下去，导致页面一直转圈。此时，你可以尝试关闭nginx缓存，或调整缓存时间，让其能够及时更新缓存内容。

其次，你也可以检查vue项目的路由配置和nginx的代理配置是否正确。如果代理配置有误，那么可能会导致请求无法正常转发，从而导致页面无法加载。在这种情况下，你可以根据具体的错误提示来排查问题，例如查看nginx的日志文件和浏览器的控制台输出等。

最后，如果以上方法都无法解决问题，你可以尝试进行网络诊断。例如使用ping命令测试服务器的连通性、使用traceroute命令追踪网络路径、检查服务器的负载等等。通过这些方法，你可以找到潜在的网络问题，并采取相应的措施来解决问题。

综上所述，请求刷新一直转圈是一个比较常见的问题，在排查时需要注意nginx的缓存配置、vue项目的路由配置和nginx的代理配置等问题。通过逐一排查，可以最终找到问题所在，并解决掉该问题。 参考技术A 如果您在Nginx上同时部署了多个Vue项目，并且在请求刷新时出现了一直转圈的情况，可能是因为Nginx配置文件中缺少对Vue路由的支持。Vue路由使用的是html5 History模式，它使用HTML5的history.pushState()和history.replaceState()方法来修改浏览器的URL，从而实现前端路由的效果。但是，当用户在浏览器中直接访问Vue路由时，Nginx服务器会将该请求发送到后端服务器，而后端服务器并没有对该路由进行处理，因此会返回404错误。
为了解决这个问题，您可以在Nginx配置文件中添加以下内容：
```
location /
try_files $uri $uri/ /index.html;

```
这个配置将会尝试匹配请求的URL，如果找不到对应的文件或目录，则会将请求转发到index.html文件。这样，当用户访问Vue路由时，Nginx服务器就会将请求转发到index.html文件，然后由Vue路由来处理该请求，从而避免了404错误。
需要注意的是，如果您的Vue项目使用了不同的路由前缀，例如“/admin”、“/user”等，那么您需要在Nginx配置文件中对每个路由前缀都进行相应的配置。 参考技术B 这个问题可能是由于Nginx配置不正确或Vue项目的路由设置不正确导致的。以下是可能的解决方案：

1. 检查Nginx配置文件是否正确。确保每个Vue项目都有自己的location块，并且每个location块都有正确的root路径和index文件。例如：

```
server
listen 80;
server_name example.com;

location /project1
root /var/www/project1;
index index.html;


location /project2
root /var/www/project2;
index index.html;


```

2. 检查Vue项目的路由设置是否正确。如果使用了Vue Router，确保每个路由都有正确的path和component。如果使用了history mode，请确保Nginx配置文件中有正确的rewrite规则。例如：

```
server
listen 80;
server_name example.com;

location /project1
root /var/www/project1;
index index.html;
try_files $uri $uri/ /project1/index.html;


location /project2
root /var/www/project2;
index index.html;
try_files $uri $uri/ /project2/index.html;


```

3. 如果以上解决方案都不起作用，请检查浏览器控制台是否有任何错误消息。可能有一些javascript错误或资源加载失败导致页面无法加载。 参考技术C 这个问题可能是因为nginx没有正确配置来处理Vue路由的历史记录模式。在历史记录模式下，Vue应用程序使用HTML5历史记录API来管理路由，这意味着URL中没有#符号。但是，如果nginx服务器没有正确配置来处理这些URL，用户在刷新页面时将会看到一个无限加载的圆圈。

要解决这个问题，你需要在nginx配置文件中添加以下内容：

```
location /
try_files $uri $uri/ /index.html;

```

这将告诉nginx在尝试访问文件和目录之前，先尝试将请求发送到Vue应用程序的入口点index.html。

如果你的Vue应用程序在不同的子目录中，你需要为每个子目录添加一个类似的配置。例如，如果你有两个Vue应用程序分别在example.com/app1和example.com/app2上运行，你需要这样配置nginx：

```
location /app1/
try_files $uri $uri/ /app1/index.html;


location /app2/
try_files $uri $uri/ /app2/index.html;

```

这将告诉nginx在请求example.com/app1或example.com/app2时，将请求发送到相应的Vue应用程序的入口点index.html。

注意：如果你使用的是Vue的哈希模式，即URL中包含#符号，那么你不需要进行这些配置。 参考技术D 如果nginx同时部署了多个vue项目后请求刷新一直转圈，可能是由于nginx的缓存机制导致的。你可以尝试在nginx配置文件中添加以下代码来禁用缓存：

```
location /
add_header Cache-Control no-cache;
try_files $uri $uri/ /index.html;

```

其中，`Cache-Control no-cache`表示禁用缓存，`try_files $uri $uri/ /index.html`表示尝试匹配请求的文件，如果不存在则返回index.html文件。这样可以保证刷新页面时不会受到缓存的影响。

nginx部署前端项目后刷新浏览器报错404

问题： Vue项目打包部署Nginx服务器后，刷新页面后出现404的问题。

原因： 加载单页应用后路由改变均由浏览器处理，而刷新时将会请求当前的链接，而Nginx无法找到对应的页面。

解决：在Nginx配置文件nginx.conf中加入如下配置： 

try_files $uri $uri/ /index.html;

# 变量解释
try_files  固定语法
$uri       指代home文件(ip地址后面的路径，假如是127.0.0.1/index/a.png，那就指代index/a.png)
$uri/      指代home文件夹
/index.html  向ip/index.html 地址发起请求
 
try_files $uri $uri/ /index.html;
尝试解析下列2个文件/文件夹(自动分辨出，IP后面的路径是文件还是文件夹)， $uri/$uri/，
如果解析到，返回第一个，
如果都没有解析到，向127.0.0.1/index.html发起请求跳转(该路由必须真实，不然会报错）

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events 
    worker_connections  1024;



http 
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server 
        listen       8100;
        server_name  localhost;
        charset utf-8;
        location / 
            root   D:/deploy/web/http;
            index  index.html index.htm;
        
       

     server 
        listen       80;
        server_name  localhost;
        charset utf-8;
        location / 
            root   D:/deploy/gn/http;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;