spring boot + vue 整合部署（前端代码编译后打到

前后端分离部署的方式

1. vue 编译后的静态资源放在 springboot 的 jar 包外
2. vue 编译后的静态资源直接打包到 springboot 的 jar 包内，跟随后端代码一同发布（接下来演示这种部署方式）

vue 编译后的静态资源直接打包到 springboot 的 jar 包内最佳实践

需求

• 前端代码和后端代码放在同一个代码仓库下
• 每次发布只需要执行 mvn clean install ，无需手动编译 vue 代码

实现

目录结构

demo/src/main/console-fe  -- 前端代码
demo/src/main/java  -- 后端代码
demo/src/main/resources  -- 配置文件目录
demo/src/main/resources/resources  -- 空
demo/pom  -- pom 文件

实现思路

1. 利用 frontend-maven-plugin 插件在每次 package 时自动执行 npm install 和 npm run build。build 后的前端代码在 demo/src/main/console-fe/dist 下。
2. 将 build 好的前端代码打包到 demo/target/classes/resources 目录下
3. 打好的 jar 包中就包含了前端代码

pom 文件内容

<properties>
    <frontend-maven-plugin.version>1.6</frontend-maven-plugin.version>
    <node.version>v10.15.3</node.version>
    <npm.version>6.4.1</npm.version>
</properties>
<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
</dependencies>
<build>
    <plugins>
        <plugin>
            <groupId>com.github.eirslett</groupId>
            <artifactId>frontend-maven-plugin</artifactId>
            <version>${frontend-maven-plugin.version}</version>
            <configuration>
                <nodeDownloadRoot>https://npm.taobao.org/mirrors/node/</nodeDownloadRoot>
                <npmDownloadRoot>https://registry.npm.taobao.org/npm/-/</npmDownloadRoot>
                <installDirectory>src/main/console-fe/</installDirectory>
                <workingDirectory>src/main/console-fe/</workingDirectory>
                <nodeVersion>${node.version}</nodeVersion>
                <npmVersion>${npm.version}</npmVersion>
            </configuration>
            <executions>
                <!-- 构建时自动安装 node 和 npm -->
                <execution>
                    <id>install node and npm</id>
                    <goals>
                        <goal>install-node-and-npm</goal>
                    </goals>
                </execution>
                <!-- 构建时执行 npm install -->
                <execution>
                    <id>npm install</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                    <phase>generate-resources</phase>
                    <configuration>
                        <arguments>install</arguments>
                    </configuration>
                </execution>
                <!-- 构建时执行 npm run build -->
                <execution>
                    <id>npm run build</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                    <configuration>
                        <arguments>run build</arguments>
                    </configuration>
                </execution>
            </executions>
        </plugin>
    </plugins>
    <resources>
        <!-- 将 npm run build 后的 dist 内容复制到 resources 目录下 -->
        <resource>
            <directory>src/main/console-fe/dist</directory>
            <targetPath>resources</targetPath>
        </resource>
        <resource>
            <directory>src/main/resources</directory>
        </resource>
    </resources>
</build>

生成 jar 包制品

mvn clean install -Dmaven.test.skip=true