1、首先在服务器下载一个Tomcat,并在webapps文件夹下创建一个用来存放前端vue项目的文件夹，我这里创建的是vueProject文件夹。
我这里修改Tomcat的server.xml 将localhost改成了服务器ip，为的是局域网可以访问Tomcat。
2、打包vue项目。
在打包前 先修改一个vue项目，首先我这里将axios进行了封装 ，增加 **myaxios.defaults.baseURL="http://10.98.0.115:8080/demo"这段代码这是用来增加请求后端接口URL路径的前缀。这里10.98.0.115是服务器的ip地址，demo是java后端wepapps下的项目存放文件夹

const myaxios = axios.create({
  headers: {
    "Content-Type": "application/json;charset=UTF-8"
  },
  timeout: 5000
});
//请求的前缀 Tomcat
myaxios.defaults.baseURL="http://10.98.0.115:8080/demo"
// axios 请求拦截器
myaxios.interceptors.request.use(function(config) {
  return config; //一定要返回，然后再发送到后端
});

此时npm run build 打包，会形成dist文件夹，将里面的所有文件放到准备好的vueProject文件夹里，这里也可以用dist文件夹。
运行tomcat bin文件下startup.bat文件，在浏览器中输入10.98.0.115:8080/vueProject，就可以运行项目
出现页面空白问题，解决方法 ： 在路由里面增加base: ‘/vueProject/’

Vue.use(Router);

export default new Router({
  mode: "history",
  //配置到服务器上时需要对应webapps中前端项目文件夹的名称
  base: '/vueProject/',
  routes: [
    {
      path: "/",
      name: "login",
      component: Login
    },
    {

又出现图片等静态文件无法访问 解决方法，在vue.config.js里添加publicPath:“./” 如没有vue.config.js文件，自行创建!

module.exports = {
  //解决Tomcat下静态文件访问的问题
  publicPath:"./",
  }

启动后 访问10.98.0.115:8080/vueProject，前端会报异常，无法访问静态页面，是由于vue前端打包后文件夹下没有 WEB-INF文件夹
创建一个WEB-INF文件夹，并在里面创建一个web.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
		 xmlns:xsi="http://www.w3.ogr/2001/XMLSchema-instance"
		 xsi:schemaLocation="htpp://xmlns.jcp.org/xml/ns/javaee
		 http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
		 version="3.1" metadate-complete="true">
	<dispalye-name>/<dispalye-name>
	<error-page>
		<error-code>404</error-code>
		<location>/index.html</location>
	</error-page>
</web-app>

此时，前端项目修改完毕，再次打包，并部署到vueProject文件夹下，启动tomcat，显示正常。
补充：
如果想要在页面访问时，不要加上项目名称，将打包的dist文件夹中的所有文件全部放到Tomcat/webapps/ROOT文件夹内。
上面创建WEB-INF文件夹，并创建web.xml文件。解决了项目可以正常运行，但是用户点击浏览器的刷新按钮，前端出现404，找不到页面的问题。