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等静态资源，否则也会导致找不到页面的问题。

vue部署到tomcat 404

将Vue应用部署到Tomcat时，可能会遇到404错误。这个错误通常是由于路由模式的配置问题导致的。默认情况下，Vue Router使用history模式，而Tomcat不支持这种模式。为了解决这个问题，你可以考虑以下两种方法：

方法一：使用hash模式
在创建Vue Router实例时，指定使用hash模式可以解决这个问题。具体做法是在创建Vue Router实例的时候添加"mode: 'hash'"配置项。这样，Vue应用就会使用URL的哈希部分来管理路由，而不会影响Tomcat的配置。

方法二：修改Tomcat的配置
如果你想继续使用history模式，可以修改Tomcat的配置来支持它。在Tomcat的配置文件中，找到和你的项目对应的Context节点，添加一个<rewrite>规则来处理路由。这样，Tomcat就能正确地解析和返回Vue应用的路由页面。

另外，还需要注意以下几点：
1. 确保你的项目文件夹名称在路由配置文件中的base属性中正确指定，以便Tomcat能够正确地找到资源。
2. 如果在部署时将dist文件夹放在webapps下，需要修改config文件夹下的index.js文件中的assetsPublicPath配置项，将其设置为与dist文件所在路径相匹配的值。

通过以上方法，你应该能够成功解决Vue部署到Tomcat时的404错误。