前后端分离（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.CorsConfiguration;
   import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
   import org.springframework.web.filter.CorsFilter;
   
   @Configuration
   public class CorsConfig {
   
       /**
        * cors support
        * @return
        */
       @Bean
       public FilterRegistrationBean corsFilter() {
           // 注册CORS过滤器
           UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
           CorsConfiguration config = new CorsConfiguration();
           config.setAllowCredentials(true); // 是否支持安全证书
           config.addAllowedOrigin("*"); // 允许任何域名使用
           config.addAllowedHeader("*"); // 允许任何头
           config.addAllowedMethod("*"); // 允许任何方法（post、get等）
           // 预检请求的有效期，单位为秒。
           //        config.setMaxAge(3600L);
   
           source.registerCorsConfiguration("/**", config);
           FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
           bean.setOrder(0);
           return bean;
       }
   }
   

2. SpringBoot项目的修改：

   首先需要修改pom.xml文件，如下：

   <build>
       <finalName>yuanxing-server</finalName><!-- 打包后的war名称-->
       <plugins>
           <plugin>
               <groupId>org.springframework.boot</groupId>
               <artifactId>spring-boot-maven-plugin</artifactId>
           </plugin>
       </plugins>
   </build>
   

   指定打包格式

   <packaging>war</packaging>
   

   tomcat去除

   <dependency>
       <groupId>org.springframework.boot</groupId>
       <artifactId>spring-boot-starter</artifactId>
   </dependency>
   
   <dependency>
       <groupId>org.springframework.boot</groupId>
       <artifactId>spring-boot-starter-web</artifactId>
       <!-- 打包的时候以war包形式，这里要把springboot集成的tomcat去除 -->
       <exclusions>
           <exclusion>
               <groupId>org.springframework.boot</groupId>
               <artifactId>spring-boot-starter-tomcat</artifactId>
           </exclusion>
       </exclusions>
   </dependency>
   <!-- 项目测试需要 -->
   <dependency>
       <groupId>org.springframework.boot</groupId>
       <artifactId>spring-boot-starter-tomcat</artifactId>
       <scope>provided</scope>
   </dependency>
   

3. 启动类继承SpringBootServletInitializer

   package com.hpsyche.yuanxing;
   
   import org.springframework.boot.SpringApplication;
   import org.springframework.boot.autoconfigure.SpringBootApplication;
   import org.springframework.boot.builder.SpringApplicationBuilder;
   import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;
   
   @SpringBootApplication
   public class YuanxingApplication extends SpringBootServletInitializer {
       @Override
       protected SpringApplicationBuilder configure(SpringApplicationBuilder builder) {
           return builder.sources(YuanxingApplication.class);
       }
   
       public static void main(String[] args) {
           SpringApplication.run(YuanxingApplication.class, args);
       }
   
   }
   

此时maven package，将在target目录下生成的war包放置与tomcat下的webapps中，重启tomcat，即可正常访问项目。

当然：前提是你要要求前端axios请求访问的url是正确的（确保url包含服务端代码的项目名）。