基于springboot+vue的前后端分离后项目部署方案

在传统模式下，项目部署只可能是后端开发人员的事，与前端开发人员没有什么关系。而前后端分离后，可能会有些许改变。

常见的部署方案如下：

一、前后端一起部署，前端打包成静态文件，拷贝到后端项目中，然后部署后端项目。

二、前后端分开部署，前端使用nginx部署,后端单独运行，然后使用nginx反向代理。

三、前后端分开部署，前端扔在cdn,后端单独运行。

本文重点讲一下方案一和方案二，限定条件：路由模式-history

部署原理：

如果访问路径对应的文件存在，则返回对应文件；
如果访问路径对应的文件不存在，则返回index.html

部署方案一（springboot+vue）

后端新增控制器处理如下：

// 这里用到了模板引擎thymeleaf（当然，别的模板引擎也行）
@Controller
public class IndexController {
	@GetMapping("/ui/**") // 所有的/ui/** 返回index.html页面
	public ModelAndView ui() {
		return new ModelAndView("/index.html");
	}
	@GetMapping("/") // 访问根目录，要转发到上面的请求
	public ModelAndView index() {
		return new ModelAndView("forward:ui");
	}
}

注意：这里的/ui/主要是为了方便区分是否为前端路由，和前端的路由的base保持一致。

前端路由文件处理如下：

const router = new VueRouter({
  base:"/ui/", // 这里要和控制层那里配置一致
  mode:'history',
  routes: [
    {
      path:'/',
      name:'home',
      component: () => import('@/views/home.vue')
    },
    {
      path:'/about',
      name:'about',
      component: () => import('@/views/about.vue')
    }
  ]

部署流程

将前端工程进行打包，生成文件在dist目录下
将前端打包的dist/**的所有文件（除index.html外）复制到src/main/resources/static目录下（springboot静态文件目录）
将前端打包的dist/index.html文件复制到src/main/resources/templates（模板引擎模板根目录）
maven打包生成jar包

发布

这里推荐一个maven打包插件

 <!--资源插件，主要为了从前端项目里复制打包好的文件到springboot项目-->
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-resources-plugin</artifactId>
                <executions>
                    <execution>
                        <id>copy static</id>
                        <phase>generate-resources</phase>
                        <goals>
                            <goal>copy-resources</goal>
                        </goals>
                        <configuration>
                            <outputDirectory>src/main/resources/static</outputDirectory>
                            <overwrite>true</overwrite>
                            <resources>
                                <resource>
                                    <!--因为vue-cli打包的目录在项目的根目录，所以从这里复制-->
                                    <directory>/java_projects/${project.artifactId}/dist</directory>
                                    <includes>
                                        <include>css/</include>
                                        <include>img/</include>
                                        <include>fonts/</include>
                                        <include>js/</include>
                                        <include>favicon.ico</include>
                                    </includes>
                                </resource>
                            </resources>
                        </configuration>
                    </execution>
                    <execution>
                        <id>copy template</id>
                        <phase>generate-resources</phase>
                        <goals>
                            <goal>copy-resources</goal>
                        </goals>
                        <configuration>
                            <outputDirectory>src/main/resources/templates</outputDirectory>
                            <overwrite>true</overwrite>
                            <resources>
                                <resource>
                                    <!--因为vue-cli打包的目录在项目的根目录，所以从这里复制-->
                                    <directory>/java_projects/${project.artifactId}/dist</directory>
                                    <includes>
                                        <include>index.html</include>
                                    </includes>
                                </resource>
                            </resources>
                        </configuration>
                    </execution>
                </executions>
            </plugin>

部署方案二（nginx+springboot+vue）

nginx配置如下：

server {
        listen       80;
        server_name  localhost;
        root /java_projects/project_name/dist; # 前端打包目录
        location / {
            try_files $uri $uri/ @router; # 存在文件，返回文件，不存在，由@router处理
            index index.html;
        }
        location @router {
            rewrite ^.*$ /index.html last; # 所有请求，返回index.html
        }
        location /api { # 为了访问统一处理,前端也要修改
            rewrite /api/(.*) /$1 break; # 重写请求（后端并无/api前辍）
            proxy_pass http://127.0.0.1:18080; # 接口地址
        }
}

或者不重写，url加/

server {
        listen       80;
        server_name  localhost;
        root /java_projects/project_name/dist; # 前端打包目录
        location / {
            try_files $uri $uri/ @router; # 存在文件，返回文件，不存在，由@router处理
            index index.html;
        }
        location @router {
            rewrite ^.*$ /index.html last; # 所有请求，返回index.html
        }
        location /api/ { # 为了访问统一处理,前端也要修改
            proxy_pass http://127.0.0.1:18080/; # 接口地址
        }
}

前端修改如下：

axios.defaults.baseURL='/api'; // 该配置与nginx配置一致