vue项目刷新按钮报错解决

一、vue路由的两种模式

Vue Router的两种主要模式是hash模式和history模式，它们的主要区别在于URL的结构和服务器配置需求。

• Hash模式：

  • URL特点：URL中包含一个'#'符号，该符号后的部分称为hash，这部分虽然出现在URL中，但不会被发送到服务器。
  • 工作原理：通过监听window.onhashchange事件来监听hash值的变化，从而实现页面更新，不需要服务器配置。
  • 刷新页面行为：当用户刷新页面时，页面内容不会改变，因为hash变化不会触发新的HTTP请求。

• History模式：

  • URL特点：URL中没有'#'符号，看起来像是正常的网页URL。
  • 工作原理：利用HTML5的History API（包括pushState()和replaceState()方法）来修改URL，同时监听popstate事件来处理页面更新。这种模式下，URL的改变会触发浏览器的历史记录变化。
  • 服务器配置需求：由于history模式的URL看起来像是直接请求静态资源，如果服务器没有正确配置这些路由，页面刷新时可能会返回404错误。因此，使用history模式通常需要服务器配置支持。

总结来说，选择哪种模式取决于项目的具体需求和服务器配置情况。Hash模式简单易用，不需要服务器配置，适合小型项目或演示；而History模式提供了更友好的URL和浏览器历史记录支持，适合大型生产环境应用。

二、使用history模式刷新报错

解决办法：修改 nginx.conf 配置文件中的配置，在location / 的配置文件中添加

try_files $uri $uri/ /index.html;

    location / {
        root   /usr/share/nginx/html;
	try_files $uri $uri/ /index.html;
        index  index.html index.htm;
    }

这句话是Nginx服务器配置中的一条指令，用于设置处理请求的策略。

$uri：这是Nginx内置的一个变量，代表当前请求的URI，不包括参数部分。例如，如果请求的URL是http://example.com/user?id=1，那么$uri的值就是/user。

$uri/：尝试将请求作为目录处理，如果这个目录存在，Nginx会试图返回该目录下的默认文件（通常是index.html或index.htm）。

/index.html：如果前面的$uri和$uri/都无法找到对应的文件或目录，那么就返回/index.html文件。

因此，try_files $uri $uri/ /index.html; 的含义是：首先尝试按照请求的URI去寻找对应的文件，如果找不到，再尝试将请求作为目录处理，如果还是找不到，最后就返回/index.html文件。

这对于单页应用来说非常有用，因为无论用户请求的是什么URL，服务器都会返回同一个HTML文件（即index.html），然后由前端路由来决定显示哪个页面