tomcat部署vue项目Vue Router路径刷新404

在部署 Vue 项目到 Tomcat 后，当使用 Vue Router 时，刷新页面会出现 404 错误。这是因为 Tomcat 默认是不支持单页面应用的，需要进行一些配置。

解决方法：

1. 在根目录下创建 `web.xml` 文件，内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<web-app>
  <error-page>
    <error-code>404</error-code>
    <location>/index.html</location>
  </error-page>
</web-app>

2. 在 `vue.config.js` 文件中添加以下代码：

module.exports = {
  publicPath: './',
  outputDir: 'dist',
  assetsDir: 'static',
  devServer: {
    historyApiFallback: true
  }
}

其中 `publicPath` 表示公共路径，`historyApiFallback` 表示使用 HTML5 history 模式，即路由模式。

3. 执行 `npm run build` 命令进行打包，将打包后的文件放到 Tomcat 的 `webapps` 目录下。

4. 启动 Tomcat，访问应用即可正常使用路由，并且刷新页面也不会出现 404 错误了。

相关问题

tomcat部署vue项目Vue Router路径刷新后找不到

如果你在部署Vue项目到Tomcat上时，使用了Vue Router的history模式（即将路由模式设置为history），在页面刷新时会出现找不到页面的错误。这是因为在history模式下，Vue Router会使用HTML5的history API来管理路由，而Tomcat服务器默认是基于Servlet规范的URL匹配模式，不支持HTML5的history API。

为了解决这个问题，你可以在Tomcat的web.xml文件中添加一个错误页面的配置，来将所有的404错误都重定向到Vue项目的首页，即：

<error-page>
  <error-code>404</error-code>
  <location>/index.html</location>
</error-page>

这样，当出现404错误时，Tomcat服务器就会将请求重定向到Vue项目的首页，从而避免了找不到页面的问题。另外，使用history模式时，需要确保在Vue项目的index.html文件中正确地引用了CSS和JavaScript等静态资源，否则也会导致找不到页面的问题。

在Nginx和Tomcat服务器上部署Vue项目时，如何正确配置history模式和静态资源路径以确保应用的正常访问和运行？

在将Vue项目部署到Nginx和Tomcat服务器时，配置history模式和静态资源路径是确保应用正常运行的关键步骤。以下详细的步骤和配置方法将指导你完成整个过程。

参考资源链接：[Vue项目部署到Nginx/Tomcat服务器实战指南](https://wenku.csdn.net/doc/6401ab99cce7214c316e8d2f?spm=1055.2569.3001.10343)

首先，确保Vue Router使用history模式，这样可以让URL看起来更加友好，而不是带有#的hash模式。在你的Vue项目中，需要在router的配置文件中设置mode为'history'，例如：

const router = new VueRouter({
  routes,
  mode: 'history' // 设置路由模式为history
});

接下来，针对Nginx服务器的配置。你需要在Nginx的配置文件中（通常是nginx.conf），添加一个新的server块来监听特定的端口，并设置正确的服务器名称。对于history模式，重要的配置项是如何处理所有前端路由的请求。通常，我们会设置一个location块来捕捉对静态资源的请求，并且处理对于index.html的请求，以便Vue Router可以接管路由。一个基本的配置示例如下：

server {
    listen 80;
    server_***; // 替换为实际的域名

    location / {
        root /path/to/your/vue/project/dist; // 指向你的Vue项目打包后的静态文件目录
        index index.html;
        try_files $uri $uri/ @router; // 为未找到的静态资源重定向请求到index.html
    }

    location @router {
        rewrite ^.*$ /index.html last;
    }
}

对于Tomcat服务器，你需要将Vue项目打包后的静态文件部署到Tomcat的webapps目录下，并确保路径与Vue Router中的base属性相匹配。例如，如果你的Vue Router配置了base: '/test/'，那么你可能需要在webapps目录下创建一个test目录，并将打包后的静态文件放入其中。访问时，URL将包含项目路径，例如`***`。

最后，无论是部署到Nginx还是Tomcat，都需要确保Vue项目配置的静态资源路径与服务器配置的静态资源路径保持一致。这样，当应用运行时，所有静态资源如CSS、JavaScript和图片文件都能被正确加载。

通过以上步骤，你可以确保Vue项目在Nginx和Tomcat服务器上以history模式正常运行，同时正确地处理静态资源路径问题。如果你希望进一步学习和理解这些配置的实际应用和细节，我强烈推荐你查阅这本《Vue项目部署到Nginx/Tomcat服务器实战指南》，它不仅详细讲述了配置过程，还提供了丰富的实践案例和调试技巧。

参考资源链接：[Vue项目部署到Nginx/Tomcat服务器实战指南](https://wenku.csdn.net/doc/6401ab99cce7214c316e8d2f?spm=1055.2569.3001.10343)