SpringBoot前后端分离项目部署到一个Tomcat下详细（一）前端部署

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文件

	/
	
		404
		/index.html
	

此时，前端项目修改完毕，再次打包，并部署到vueProject文件夹下，启动tomcat，显示正常