基于maven插件实现vue前端工程打包
Posted kuailefangyuan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基于maven插件实现vue前端工程打包相关的知识，希望对你有一定的参考价值。
基于maven插件实现vue前端工程打包
一、问题背景
公司项目管理平台为前后端分离框架，前端工程系基于vue-admin框架实现。每次jenkins编译出包时需针对vue前端工程执行以下单独的shell编译打包流程，详细如下：
#0. 代理连接外网，nodejs需要拉js包
export http_proxy=http://172.30.28.35:3128
export https_proxy=http://172.30.28.35:3128
export NODE_HOME=/home/devops/node-v10.13.0-linux-x64
export PATH=$NODE_HOME/bin:$PATH
#1. xxx-admin-frontent前端工程构建
# 1.1 xxx-admin-fronted构建
source ~/.bash_profile
cd $WORKSPACE/xxx-admin/xxx-admin-frontend/target/
npm cache clean --force
npm config set registry https://registry.npm.taobao.org/
npm install
npm install webpack
npm run test
# 将编译生成的dist文件夹打成tar包并scp到目标机器tmp目录
cd $WORKSPACE/xxx-admin/xxx-admin-frontend/target/dist/
tar czvf xxx-admin-frontent.tar . --warning=no-file-changed
cd $WORKSPACE/xxx-admin/xxx-admin-frontend/target/
scp ./xxx-admin-frontend.tar xxx@172.30.252.157:/home/xxx/tmp
现希望直接基于maven插件实现前后端工程的混合编译打包，省略上述配置。
二、解决方案
1、方案一：基于exec-maven-plugin插件实现对vue前端工程打包
该方案实现以下目标：
- 基于maven插件实现编译vue前端工程生成dist文件夹。
- 将编译生成的dist文件夹打包成tar文件。
- 支持根据profile传参进行不同环境的编译打包。
- 由于vue前端工程改动较少，每次出包耗时长，允许jenkins编译打包工程时，根据传参跳过vue前端工程的打包。
具体实现如下：
前端工程xxx-admin-frontent工程pom.xml配置文件增加如下配置：
<build>
<finalName>xxx-admin-frontend</finalName>
<plugins>
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId>
<version>1.6.0</version>
<configuration>
<skip>$skipDeploy</skip>
</configuration>
<executions>
<!--执行npm install-->
<execution>
<id>exec-npm-install</id>
<phase>generate-resources</phase>
<goals>
<goal>exec</goal>
</goals>
<configuration>
<executable>npm</executable>
<arguments>
<argument>install</argument>
</arguments>
<workingDirectory>$basedir/vue</workingDirectory>
</configuration>
</execution>
<!--执行npm build-->
<execution>
<id>exec-npm-run-build</id>
<phase>generate-resources</phase>
<goals>
<goal>exec</goal>
</goals>
<configuration>
<executable>npm</executable>
<arguments>
<argument>run</argument>
<arguments>$package.environment</arguments>
</arguments>
<workingDirectory>$basedir/vue</workingDirectory>
</configuration>
</execution>
</executions>
</plugin>
<!--将dist文件夹打包为tar包-->
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-assembly-plugin</artifactId>
<version>3.3.0</version>
<executions>
<execution>
<id>make-assembly</id>
<phase>package</phase>
<goals>
<goal>single</goal>
</goals>
<configuration>
<skipAssembly>$skipDeploy</skipAssembly>
<appendAssemblyId>false</appendAssemblyId>
<finalName>xxx-admin-frontend</finalName>
<descriptors>
<descriptor>assembly.xml</descriptor>
</descriptors>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>
<profiles>
<profile>
<id>local</id>
<properties>
<package.environment>local</package.environment>
</properties>
</profile>
<profile>
<id>test</id>
<properties>
<package.environment>test</package.environment>
</properties>
<activation>
<activeByDefault>true</activeByDefault>
</activation>
</profile>
<profile>
<id>uat</id>
<properties>
<package.environment>uat</package.environment>
</properties>
</profile>
<profile>
<id>prod</id>
<properties>
<package.environment>build:prod</package.environment>
</properties>
</profile>
</profiles>
其中assembly.xml配置内容如下：
<assembly>
<id>xxx-admin-frontend</id>
<formats>
<!-- 支持打包格式：zip,tar,tar.gz,tar.bz2,jar,dir,war -->
<format>tar</format>
</formats>
<includeBaseDirectory>false</includeBaseDirectory>
<!-- 需要打包的文件集 -->
<fileSets>
<fileSet>
<directory>$basedir/vue/dist</directory>
<includes>
<include>**/*</include>
</includes>
<outputDirectory>/</outputDirectory>
</fileSet>
</fileSets>
</assembly>
其中pom.xml中支持profile环境参数的配置，对应的package.json中npm执行参数配置如下：
"scripts":
"init": "webpack --progress --config build/webpack.local.config.js",
"lint": "eslint --fix --ext .js,.vue src",
"local": "webpack-dev-server --host 0.0.0.0 --content-base ./ --open --inline --hot --compress --config build/webpack.local.config.js",
"test": "webpack --progress --hide-modules --config build/webpack.test.config.js",
"uat": "webpack --progress --hide-modules --config build/webpack.uat.config.js",
"build:prod": "webpack --progress --hide-modules --config build/webpack.prod.config.js"
maven构建的参数如下：
-s /home/devops/.m2/settingsnewglobal.xml -Dmaven.test.skip=true clean install -P test -DskipDeploy=false
-DskipDeploy=true 即指定jenkins编译出包时跳过前端vue工程的编译打包环节。
注意：以上配置生效的前提是jenkins服务器已经安装有node.js以及npm环境，当前jenkins服务器安装的node.js版本为node 12.18.3，方案一生效的前提是jenkins服务器已经安装有node.js以及npm环境，如需打包时安装node.js以及npm环境，可参考方案二。
2、方案二：基于frontend-maven-plugin 插件实现对vue前端工程打包
方案二实现以下目标：
- 基于maven插件实现编译vue前端工程生成dist文件件。
- 将编译生成的dist文件夹打包成tar文件。
- 支持根据profile传参进行不同环境的编译打包。
<build>
<finalName>xxx-admin-frontend</finalName>
<plugins>
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId>
<version>1.6.0</version>
<configuration>
<skip>$skipDeploy</skip>
</configuration>
<executions>
<!--执行npm install-->
<execution>
<id>exec-npm-install</id>
<phase>generate-resources</phase>
<goals>
<goal>exec</goal>
</goals>
<configuration>
<executable>npm</executable>
<arguments>
<argument>install</argument>
</arguments>
<workingDirectory>$basedir/vue</workingDirectory>
</configuration>
</execution>
<!--执行npm build-->
<execution>
<id>exec-npm-run-build</id>
<phase>generate-resources</phase>
<goals>
<goal>exec</goal>
</goals>
<configuration>
<executable>npm</executable>
<arguments>
<argument>run</argument>
<arguments>$package.environment</arguments>
</arguments>
<workingDirectory>$basedir/vue</workingDirectory>
</configuration>
</execution>
</executions>
</plugin>
<!--将dist文件夹打包为tar包-->
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-assembly-plugin</artifactId>
<version>3.3.0</version>
<executions>
<execution>
<id>make-assembly</id>
<phase>package</phase>
<goals>
<goal>single</goal>
</goals>
<configuration>
<skipAssembly>$skipDeploy</skipAssembly>
<appendAssemblyId>false</appendAssemblyId>
<finalName>xxx-admin-frontend</finalName>
<descriptors>
<descriptor>assembly.xml</descriptor>
</descriptors>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>
<profiles>
<profile>
<id>local</id>
<properties>
<package.environment>local</package.environment>
</properties>
</profile>
<profile>
<id>test</id>
<properties>
<package.environment>test</package.environment>
</properties>
<activation>
<activeByDefault>true</activeByDefault>
</activation>
</profile>
<profile>
<id>uat</id>
<properties>
<package.environment>uat</package.environment>
</properties>
</profile>
<profile>
<id>prod</id>
<properties>
<package.environment>build:prod</package.environment>
</properties>
</profile>
</profiles>
其中pom.xml中支持profile环境参数的配置，对应的package.json中npm执行参数配置如下：
"scripts":
"init": "webpack --progress --config build/webpack.local.config.js",
"lint": "eslint --fix --ext .js,.vue src",
"local": "webpack-dev-server --host 0.0.0.0 --content-base ./ --open --inline --hot --compress --config build/webpack.local.config.js",
"test": "webpack --progress --hide-modules --config build/webpack.test.config.js",
"uat": "webpack --progress --hide-modules --config build/webpack.uat.config.js",
"build:prod": "webpack --progress --hide-modules --config build/webpack.prod.config.js"
aseemble.xml配置如下：
<assembly>
<id>xxx-admin-frontend</id>
<formats>
<!-- 支持打包格式：zip,tar,tar.gz,tar.bz2,jar,dir,war -->
<format>tar</format>
</formats>
<includeBaseDirectory>false</includeBaseDirectory>
<!-- 需要打包的文件集 -->
<fileSets>
<fileSet>
<directory>$basedir/vue/dist</directory>
<includes>
<include>**/*</include>
</includes>
<outputDirectory>/</outputDirectory>
</fileSet>
</fileSets>
</assembly>
cleanFiles.js内容如下：
const fs = require('fs')
const p = require('path')
const nodeModulesPath = p.join(__dirname, '../../node_modules')
const lockJsonPath = p.join(__dirname, '../../package-lock.json')
if (fs.existsSync(nodeModulesPath))
const fileUtil = require('./fileUtil')
fileUtil.deleteFolderByRimraf(nodeModulesPath)
console.log('删除 node_modules 成功!')
fileUtil.deleteFile(lockJsonPath)
console.log('删除 package-lock.json 成功!'以上是关于基于maven插件实现vue前端工程打包的主要内容，如果未能解决你的问题，请参考以下文章