【我用ChatGPT学编程】Vue-Router中history模式Nginx部署后刷新404的问题

前言

作为一个码农我们都知道ChatGPT实际上是一个十分好用的代码工具，它使用了MarkDown语法更符合我们的习惯，并且可以根据语义理解问题并且给出多种解决方案，所以这个系列就是用ChatGPT来给出对于在coding时遇到的各种Bug。

ChatGPT似乎可以变成一个带我的老师，让我在解决问题的途中少走弯路。

解决方案

问题剖析

在Vue Router中使用history模式时，在刷新页面时，Nginx服务器将尝试从其文件系统中查找URL路径，而不是将请求发送到您的Vue应用程序。

具体解决方案

需要在Nginx中配置一个反向代理，以便将所有请求发送到Vue应用程序的入口点。下面是一个Nginx配置示例：

server {
  listen 80;
  server_name your-domain.com;

  # 指定 Vue 应用程序的根目录
  root /var/www/your-domain.com;

  # 指定 Vue 应用程序的入口点
  index index.html;

  # 配置反向代理
  location / {
    try_files $uri $uri/ /index.html;
  }
}

在这个配置中，我们使用location /指令来匹配所有请求，并使用try_files指令将请求发送到Vue应用程序的入口点（index.html）。这样，在刷新页面时，Nginx将发送请求到Vue应用程序，而不是从文件系统中查找路径，从而解决了丢失页面的问题。

请注意，如果您的Vue应用程序使用HTTPS，请将listen指令更改为listen 443 ssl，并配置您的SSL证书。同时，您需要将server_name指令更改为您的域名，以便Nginx可以正确地匹配请求。

总结

简单的说就是在80端口的server中加入

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

就可以解决问题，值得注意的是，如果您的网站使用了SSL，并且是强制重定向到https访问的话，也同时需要在443端口在加上上述反向代理

Chat回答

结果

经测试解决问题，仅提问一次ChatGPT即解决该问题。满分好评。

当然如果大佬们觉得还有更好的方案可以提出来，我也学习一下！