Vue-router history 模式地址请求提示 404 ?

前端老赵前端开发培训 236 0

Vue-router 的 history 模式依赖于 HTML5 History API 来实现 URL 的无刷新跳转。当使用这种模式时，服务器上的所有路由都需要返回同一个 HTML 页面，即你的 Vue 应用。这是因为 Vue-router 会在客户端处理路由的变更，而服务器本身并不知道这些路由。

如果你访问一个没有在服务器上定义的路由，服务器会返回 404 错误，因为服务器找不到对应的页面。但是，如果你的 Vue 应用正在使用 history 模式，你希望所有的路由都由 Vue-router 在客户端处理。

解决这个问题的方法是，在你的服务器端配置一个通配符路由，它匹配任何 URL 并返回你的 Vue 应用的入口 HTML 文件。这样，无论用户访问哪个 URL，服务器都会返回相同的 HTML 页面，然后 Vue-router 会在客户端接管并显示正确的视图。

当使用IIS、Nginx和Tomcat作为Web服务器时，配置它们的路由或重写规则以实现类似Vue Router history模式的功能是不同的。下面分别展示如何在这些服务器中进行配置：

IIS 配置

在IIS中，你可以使用URL重写模块来实现通配符路由。你需要安装URL重写模块，然后在你的网站中配置重写规则。

安装URL重写模块。
打开IIS管理器，找到你的网站。
双击“URL重写”图标。
在右侧操作栏中点击“添加规则(s)...”。
选择“空白规则”模板。
为规则命名，例如“Vue Router History Mode”。
在“请求URL”模式中输入^.*$（这是一个通配符，匹配任何URL）。
在“操作”部分，选择“重写”。
在“重写URL”中输入你的Vue应用入口文件的路径，例如/index.html。
确保“停止处理后续规则”复选框被选中。
点击“应用”保存配置。

Nginx 配置

在Nginx中，你可以使用try_files指令来实现通配符路由。在你的Nginx配置文件中添加或修改相应的server块。

server {  
    listen 80;  
    server_name your-domain.com;  
  
    root /path/to/your/vue-app/dist;  
    index index.html;  
  
    location / {  
        try_files $uri $uri/ /index.html;  
    }  
}

在这个配置中，try_files指令会首先尝试按请求的URI提供文件或目录，如果找不到匹配的文件或目录，则回退到/index.html。

Tomcat 配置

Tomcat本身并不直接支持URL重写或通配符路由。但是，你可以通过配置Tomcat的默认Servlet来处理所有未找到的请求。

在你的web应用的WEB-INF目录下找到web.xml文件。
在web.xml中添加或修改Servlet映射，使其能够捕获所有请求。

<web-app ...>  
    <!-- ... 其他配置 ... -->  
  
    <servlet>  
        <servlet-name>default</servlet-name>  
        <servlet-class>org.apache.catalina.servlet.DefaultServlet</servlet-class>  
        <init-param>  
            <param-name>debug</param-name>  
            <param-value>0</param-value>  
        </init-param>  
        <init-param>  
            <param-name>listings</param-name>  
            <param-value>false</param-value>  
        </init-param>  
        <load-on-startup>1</load-on-startup>  
    </servlet>  
  
    <servlet-mapping>  
        <servlet-name>default</servlet-name>  
        <url-pattern>/</url-pattern>  
    </servlet-mapping>  
  
    <!-- ... 其他配置 ... -->  
</web-app>

在你的Vue应用构建过程中，确保所有必要的资源（如JavaScript、CSS等）都被正确地构建和放置在Tomcat能够访问的目录下。
当Tomcat收到一个未找到的资源请求时，它会默认地回退到DefaultServlet，你可以配置这个Servlet来返回Vue应用的入口文件（通常是index.html）。

请注意，Tomcat的默认行为可能会因版本和配置的不同而有所差异。在某些情况下，你可能需要自定义一个Servlet来处理这种情况，或者在应用层面（例如使用Spring MVC）进行配置。

由于Tomcat通常用于Java Web应用，而Vue应用通常是前端应用，因此将Vue应用与Tomcat结合使用可能不是最佳实践。更常见的做法是将Vue应用构建为静态资源，并将其部署在Nginx或Apache等更适合静态内容服务的Web服务器上。