这是我参与更文挑战的第24天，活动详情查看：更文挑战

业务场景

前后端分离开发模式下, Vue项目的部署成为一个需要解决的需求

有两种解决方案:

使用Nginx作为前端Web服务器
将Vue项目变为jar包加入后端服务

无论哪种模式, 都会产生跨域问题

在之前我已经写过类似的文章Vue跨域请求的处理方式

之前的文章主要介绍了第二种方式, 但所使用的Maven打包方法中, 有一个前提, 即本地必须安装node环境

显然这对于运维小伙伴或流水线部署是不友善的

本文将介绍如何利用frontend-maven-plugin插件进行处理

方案

其实要解决的问题很简单

即在打包目录下安装node环境和包管理器

frontend-maven-plugin帮我们解决了这个问题

废话不多说, 开始写代码, 首先要增加一些参数配置:

<properties>
    <!--前端打包-->
    <maven-frontend-plugin.version>1.10.0</maven-frontend-plugin.version>
    <maven-frontend-plugin.nodeVersion>v9.9.0</maven-frontend-plugin.nodeVersion>
    <maven-frontend-plugin.npmVersion>6.9.0</maven-frontend-plugin.npmVersion>
</properties>

maven-frontend-plugin.version: 插件版本
maven-frontend-plugin.nodeVersion: node版本
maven-frontend-plugin.npmVersion: npm版本

之后引入插件并进行配置:

<plugin>
    <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
    <version>${maven-frontend-plugin.version}</version>
    <executions>
        <!-- 安装node和npm -->
        <execution>
            <id>install node and npm</id>
            <goals>
                <goal>install-node-and-npm</goal>
            </goals>
            <phase>generate-resources</phase>
        </execution>
        <!-- 设置npm私服地址 -->
        <execution>
            <id>npm set private registry</id>
            <goals>
                <goal>npm</goal>
            </goals>
            <phase>generate-resources</phase>
            <configuration>
                <arguments>config set registry http://my/npm</arguments>
            </configuration>
        </execution>
        <!-- 安装依赖 -->
        <execution>
            <id>npm install</id>
            <goals>
                <goal>npm</goal>
            </goals>
            <phase>generate-resources</phase>
            <configuration>
                <arguments>install</arguments>
            </configuration>
        </execution>
        <!-- 打包构建 -->
        <execution>
            <id>npm run build</id>
            <goals>
                <goal>npm</goal>
            </goals>
            <phase>compile</phase>
            <configuration>
                <arguments>run build</arguments>
            </configuration>
        </execution>
    </executions>
    <configuration>
        <nodeVersion>${maven-frontend-plugin.nodeVersion}</nodeVersion>
        <npmVersion>${maven-frontend-plugin.npmVersion}</npmVersion>
        <!-- 若不方便访问官网，可手动设置镜像地址-->
        <nodeDownloadRoot>https://npm.taobao.org/mirrors/node/</nodeDownloadRoot>
        <npmDownloadRoot>https://registry.npm.taobao.org/npm/-/</npmDownloadRoot>
    </configuration>
</plugin>

是不是很简单?

其实只是增加了一步流程: 安装node和npm->安装依赖->打包构建

插件本身支持yarn, 使用yarn的小伙伴只需要把npm相关的内容修改为yarn, 第一步安装时调整代码为如下即可:

<execution>
    <id>install node and yarn</id>
    <goals>
        <goal>install-node-and-yarn</goal>
    </goals>
    <phase>generate-resources</phase>
</execution>

总结

如果之前手动install过的小伙伴, 建议先把node_modules删除后再重新打包哦

Spring Boot利用Maven打包Vue项目

业务场景

方案

总结