前后端分离（SpringBoot整合Vue）部署至服务器

前言

之前曾在博客中提到SpringBoot整合Vue，这里进一步扩展，谈谈如何将前后端的项目部署到个人服务器中，由于个人只有阿里云服务器一台，这里的操作是前后端项目均部署至tomcat的情况，在网上自己也并未找到详细的教程，自己操作时也遇到一些阻碍，这里做下记录，也给他人提供借鉴。
事不宜迟，进入正文。

正文

前端的操作

首先对于vue代码，如下操作：

1. npm run build

   将dist下的index.html和static文件夹复制粘贴到tomcat的webapps的新建目录下（此例新建test目录），启动tomcat，访问localhost:8080/test，访问成功；

2. 但此时发现部分静态资源，比如fonts等图标都无法显示，找到build下的utils.js，修改如下：

   if (options.extract) {
        
         return ExtractTextPlugin.extract({
        
           use: loaders,
           fallback: 'vue-style-loader',
           publicPath:'../../' 
         })
       } else {
        
         return ['vue-style-loader'].concat(loaders)
       }
   

   即添加publicPath:'../../'

3. 出现跨域问题：

   步骤一：

   发现原先axios中的url如下

   url:'http://xxx.com:8088/，

   后面尝试假设www，改为：

   url:'http://www.xxx.com:8088/

后台代码的操作

1. 同时，要解决跨域问题，需要在后台给SpringBoot项目添加 CORS过滤器

   package com.hpsyche.yuanxing.config;
   
   import org.springframework.boot.web.servlet.FilterRegistrationBean;
   import org.springframework.context.annotation.Bean;
   import org.springframework.context.annotation.Configuration;
   import org.springframework.web.cors