Vue整合到Spring Boot

系统管理员 2022-04-10 04:24 802阅读 0赞

### 文章目录 ###

*  Vue打包部署到Spring Boot
 *   *  1 文件目录结构
     *   *  1.1 打包后的文件目录结构
         *  1.2 后台的文件目录结构
     *  2 修改webpack配置
     *  3 修改Spring Boot配置
     *  4 最后
     *  5 参考链接

# Vue打包部署到Spring Boot #

前端使用Vue，后台使用Spring Boot。使用Vue需先使用webpack打包项目，再将打包生成后的静态资源文件拷贝到Spring Boot中去整合（这里只是做本地整合测试用，实际上不会这样做部署）。

## 1 文件目录结构 ##

打包的命令很简单，在项目根目录下运行：

npm run build

### 1.1 打包后的文件目录结构 ###

打包完成后，会在根目录下生成dist文件夹，这个文件夹就是打包之后的静态资源（html、js、css等）。默认打包后生成的文件目录结构如下：

但很多时候，默认的打包路径并不能匹配我们的项目文件结构，需要通过修改配置文件，配置静态资源的打包路径。默认配置生成的静态资源文件引用路径如下：

### 1.2 后台的文件目录结构 ###

而我的Spring Boot项目的静态资源文件目录结构是这样的：

我们希望静态资源引用的路径是这样：

怎么样才能做到呢？

## 2 修改webpack配置 ##

找到vue项目config文件夹下的index.js文件，找到build属性：

module.exports = { 
      dev: { 
        // ....
      },
      build: { 
        // Template for index.html
        index: path.resolve(__dirname, '../dist/index.html'),
    
        // Paths
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
    
        /** * You can set by youself according to actual condition * You will need to set this if you plan to deploy your site under a sub path, * for example GitHub pages. If you plan to deploy your site to https://foo.github.io/bar/, * then assetsPublicPath should be set to "/bar/". * In most cases please use '/' !!! */
        assetsPublicPath: '/',
    
        // ...
      }

需要配置的就是build中的几个字段：

*  index: path.resolve(\_\_dirname, ‘…/dist/index.html’)
    
     *  index.html存放路径
 *  assetsRoot: path.resolve(\_\_dirname, ‘…/dist’)
    
     *  静态资源文件存放的根目录
 *  assetsSubDirectory: ‘static’
    
     *  静态资源文件所存放的子目录，注意与根目录区分
 *  assetsPublicPath
    
     *  静态资源部署后的公共路径，看官方注释

所以按照需求，我们只需要把静态资源文件存放的子目录更改一下即可：

assetsSubDirectory: 'assert',

## 3 修改Spring Boot配置 ##

如果使用Spring Boot默认的静态资源路径映射配置，即映射路径为：

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

则不需要我们再进行修改了。

但开放这么多目录不方便我们做权限访问控制，我通常只开放/static这一个路径，这时候访问静态资源都必须要加上/static路径前缀，否则访问不到资源，即：

这样的话，就与我们webpack打包的路径对不上了，所以需要做自定义静态资源映射，即在application.yml中做如下配置：

spring:
        mvc:
            static-path-pattern: /**
        resources:
            static-locations: classpath:/static/

## 4 最后 ##

将Vue项目下的dist文件夹中的所有文件拷贝到Spring Boot中的static文件夹中就可以了！访问localhost即可看到我们的页面。

## 5 参考链接 ##