关于nginx+vue,同域名访问不同项目，但是没能解决刷新404的问题，实在找不出解决的方法了！

nginx+vue,同域名访问不同项目，网上搜了很多，解决方案都差不多，配置也是配置那几项，我都按着配置了，确实解决了跳转404的问题，但是没能解决刷新404的问题，也就是登录之后到了首页，并且去其他页面都没问题，唯独就是刷新，一刷新就404，实在找不出解决的方法了，烦请大家帮帮忙，谢谢大家！
下面是我的配置文件。
nginx.conf

img


img

vue.config.js

img

router/index.js

img

这个问题可能是由于nginx的配置没有正确地处理Vue的路由。Vue使用的是HTML5的history模式，这种模式需要服务器端配合处理，否则在刷新页面时会出现404错误。

以下是一个可能的解决方案：

  1. 在nginx的配置文件中，确保你已经设置了try_files。这是一个重要的指令，它告诉nginx如果请求的文件不存在，那么就去尝试寻找其他的文件。对于Vue项目，你应该在location块中设置try_files $uri $uri/ /index.html;。

例如：

location / {
    root /path/to/your/vue/project/dist;
    try_files $uri $uri/ /index.html;
}
  1. 确保你的Vue项目的路由模式是history模式。如果你使用的是Vue CLI创建的项目，那么默认的路由模式就是history模式。你可以在vue.config.js文件中确认这一点：
module.exports = {
    router: {
        mode: 'history',
        ...
    }
}
  1. 如果你的Vue项目有多个，并且都在同一个nginx服务器下，那么你需要为每个项目都设置一个location块，每个location块中都要有try_files的设置。
  2. 检查你的nginx配置是否正确，你可以使用nginx -t命令来检查。如果配置没有问题，那么你需要重启nginx来使新的配置生效。
  3. 最后，确保你的nginx服务器已经正确地启动了，你可以通过访问你的Vue项目的URL来测试。如果所有的设置都正确，那么你应该可以通过刷新页面来访问所有的Vue路由。

希望这个解决方案可以帮助你解决问题。如果你还有其他的问题，欢迎随时提问。

该回答引用chatgpt

在 Nginx 中部署两个 Vue 项目可以通过配置多个 location 来实现。假设我们有两个 Vue 项目，分别是 project1 和 project2，它们的打包文件分别在 /var/www/project1 和 /var/www/project2 中。

以下是一个简单的 Nginx 配置示例，用于将这两个 Vue 项目部署到同一个服务器上：

server {
  listen 80;
  server_name yourdomain.com;

  location /project1 {
    alias /var/www/project1/;
    index index.html;
    try_files $uri $uri/ /index.html;
  }

  location /project2 {
    alias /var/www/project2/;
    index index.html;
    try_files $uri $uri/ /index.html;
  }
}

在上面的配置示例中，我们定义了两个 location，分别对应 /project1 和 /project2。其中，alias 指令用于指定 Vue 项目的打包文件所在的目录，index 指令用于指定默认的首页文件名为 index.html。try_files 指令用于指定 Nginx 在处理请求时的查找规则，其中 $uri 表示请求的 URI，$uri/ 表示请求的 URI 后加上一个斜杠，/index.html 表示默认的首页文件名为 index.html。

这样配置后，我们就可以通过访问 http://yourdomain.com/project1 和 http://yourdomain.com/project2 来访问这两个 Vue 项目了。同时，我们也可以根据实际需求来配置 SSL、反向代理、负载均衡等功能，以提高应用的安全性和可用性。


location / {
        root   /usr/gyimom/;#项目文件存放位置,可自定义或者nginx/html文件下
        index  index.html index.htm;
        if (!-e $request_filename) {
            rewrite ^(.*)$ /index.html?s=$1 last;
            break;
        }
    }


location 下面加上如下：
 if (!-e $request_filename) {
            rewrite ^(.*)$ /index.html?s=$1 last;
            break;
        }

【相关推荐】



  • 关于该问题，我找了一篇非常好的博客，你可以看看是否有帮助，链接：nginx部署vue项目刷新404，查看官方文档，正常访问没问题，只有在刷新的时候出现问题
  • 除此之外, 这篇博客: nginx发布vue 项目，解决子页面刷新404问题中的 四、子目录页面刷新404 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

    经过上面一系列的nginx配置现在可以访问了，但是在项目的子路由下刷新页面出现了404，这是因为刷新页面时访问的资源在服务端找不到，因为vue-router设置的路径不是真实存在的路径。

    这个在最初也是困惑许久，最后经过一番折腾，最后使用try_files总算解决了，在nginx中新增如下配置

    
  	location / {
             try_files $uri $uri/ @router; #检测文件存在性重定向到首页目录    防止404
             index  index.html;
     }
     location @router {
             rewrite ^.*$ /index.html last;
     }

    再来看看一个案例对try_files 的解释

    
	location / {
	    try_files $uri $uri/ /index.php?$query_string;
	
	}

    当用户请求 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。


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

路径问题，/dist或者/tu/dist，都试试

结合GPT给出回答如下请题主参考
这个问题出现的原因是因为在 Vue 中使用了 HTML5 History 模式，而在浏览器刷新页面的时候，会发送请求到后端服务器，而此时后端服务器并没有相应资源的处理方式，只能返回 404 错误。

解决方法有两种：

  1. 使用 Hash 模式

在 Vue 中使用 Hash 模式，可以避免刷新页面时出现 404 错误，但是 URL 中会带有 # 符号。

  1. 配置后端服务器

在 Nginx 的配置中，添加一个 rewrite 规则，把所有的请求都重定向到 index.html 文件中，然后再由 Vue 路由来处理。

具体的 Nginx 配置如下：

server {

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

    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

}

这个配置会把请求重定向到 index.html 文件中，然后让 Vue 路由来处理该请求。这种方式可以避免刷新页面时出现 404 错误，同时也可以保持 URL 不含 # 符号。

希望这些信息能帮到你解决问题。

该回答通过自己思路及引用到GPTᴼᴾᴱᴺᴬᴵ搜索,得到内容具体如下：
根据您提供的配置文件和描述，问题可能是由于路由刷新导致的404错误。当您在Vue项目中使用history模式进行路由时，刷新页面将导致服务器返回404错误，因为服务器无法识别Vue路由路径。

为了解决这个问题，您可以在Nginx配置中添加一个fallback路由，将所有非文件请求都重定向到index.html。这样，在刷新页面时，Nginx会将请求发送到index.html，然后由Vue路由来处理。

以下是您可以尝试的Nginx配置更改：

server {
    listen 80;
    server_name your_domain.com;

    location / {
        root /path/to/your/vue/project/dist;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}

这将尝试匹配请求的URI，如果找不到对应的文件或目录，将重定向到index.html。这样，无论您在Vue项目中的哪个路由刷新页面，Nginx都会将请求发送到index.html，并由Vue路由来处理。

请将上述配置更改应用到您的Nginx配置文件中，并重新启动Nginx服务。然后尝试刷新页面，看看问题是否得到解决。

如果问题仍然存在，请提供更多关于您的Nginx和Vue路由配置的详细信息，以便我能够提供更准确的帮助。

如果以上回答对您有所帮助，点击一下采纳该答案～谢谢