vue项目部署tomcat服务器

vue项目部署tomcat服务器

昨天经理说部署项目，部署到tomcat上或者iis，我去打包之后现在自己的服务器上运行了一下，发现接口报404，我的web服务器是Apache，为此我去网上找了很多，基本上都是nginx服务器配置反向代理
为此，我专门去搜了一下tomcat部署vue项目
部署完之后发现页面无法找到，那肯定是路径出错，百度搜后才知道，上代码

const createRouter = () => new Router({
    base: '/dist/', //上线之后再用,
    mode: 'history',
    routes: commonRoutes,
})

vue.config.js

打包

npm run build

打包后的文件要放在服务器根目录下，否则会出现空白页面。
如果不是服务器根目录则需要更改打包的路径，打开 vue.config.js 文件，添加如下代码

publicPath: './',

添加后如下所示

module.exports = {
    publicPath: './',
    devServer: {
        proxy: {
            '/api': {
                target: 'http://xxxx/device/', //对应自己的接口
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                  '^/api': ''
                }
            }
        }
    }
}

项目可以运行了，乌拉

然后正当我高兴时，一刷新，页面直接404

有问题找度娘，百度去

在Tomcat的vue项目文件夹（即webapps/ROOT）中新建一个文件夹WEB-INF，里面新建web.xml，添加以下内容：

<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
                      http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
  version="3.0"
  metadata-complete="true">

  <display-name>webapp</display-name>
  <description>
     webapp
  </description>
  <error-page>  
   <error-code>404</error-code>  
   <location>/</location>  
</error-page>  
</web-app>

本文地址：https://blog.csdn.net/myrook/article/details/107358411