Vue项目部署到SpringBoot项目的方法

简介

本文介绍如何将Vue项目部署到SpringBoot项目。

1.修改前端的后端服务地址

找到vue工程的 .env.development 文件，修改 TARGET 为正式环境后端服务API根地址:

# just a flag
ENV = 'development'

# backend api
TARGET = 'http://localhost:9000/'

2.修改前端URL转发

修改.env文件，原来是：

# base api

VUE_APP_BASE_API = '/api'

修改为：

# base api

#VUE_APP_BASE_API = '/api'

VUE_APP_BASE_API = ''

原因：

前后端独立部署时，前端会有个转发，在vue.config.js：

而当部署到SpringBoot后，这个转发就无效了，必须将其去掉。否则所有对后端的请求都带着api前缀，会报404错误。

3.编译前端工程

到Vue项目的根目录（package.json的同级目录）执行如下命令：

npm run build

也可以直接在Webstorm里去打包：

结果：

会在工程根目录生成一个dist文件夹, 编译好的静态文件就在这里面：

4.将前端部署到SpringBoot

将这个三个文件拷贝到SpringBoot工程的static文件夹下：

注意：放到以下几个路径也可以：

spring boot默认将/**静态资源访问映射到以下目录：

classpath:/static
classpath:/public
classpath:/resources
classpath:/META-INF/resources

这四个目录的访问优先级：META-INF/resources > resources > static > public

即：这四个路径下如果有同名文件，则会以优先级高的文件为准。

其对应的配置方法为：application.yml。默认配置如下：

spring:
  web:
    resources:
      static-locations: classpath:/META-INF/resources/, classpath:/resources/, classpath:/static/, classpath:/public/

其实，它还与application.yml的下边这个配置有关，两者联合起来控制路径

spring:
  mvc:
    static-path-pattern: /**

5.启动并测试

启动项目，访问：ip:端口号

注意：是SpringBoot的端口号。 ​