前後端分離（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包含服務端代碼的項目名）。