jenkins打包发布vue

Jenkins打包VUE微前端项目代码

• 一、业务场景
• 二、环境
• 三、给Jenkins添加nodejs插件

• 1、在Manage Jenkins 页面选择Plugins
• 2、选择Available plugins页面，里面搜索nodejs,然后勾选安装
• 3、在Manage Jenkins 页面选择Tools,下拉到底部，点击nodejs安装
• 4、新增node版本，跟自己项目版本一致

• 四、新建主项目

• 1、工作台首页点击“新建Item”
• 2、输入项目名称，然后选择FreeStyle project
• 3、General 勾选 Discard old builds
• 4、源码管理选择Git，然后填上代码的git地址和分支
• 5、构建环境选择Provide Node & npm bin/ folder to PATH，然后选择node版本
• 6、Build Steps中添加构建步骤，选择Execute Windows batch command(windows选这个)

• 五、新建子项目

• 1、新建子项目，操作步骤如上
• 2、git地址填入子项目的地址
• 3、构建触发器选择Build after other projects are built，并填入主项目的名字
• 4、构建环境添加方式跟主项目一致
• 5、构建步骤添加以下命令

• 六、结束

一、业务场景

  公司前端采用微前端框架，业务按照模块区分在不同的git项目下开发，最后分别打包然后合入到一起，所以就想偷下懒，用Jenkins在本地进行打包然后合入一个文件夹，免得自己还需要一个个项目build，并且也整合了项目结构，不至于项目上线后需要对子项目再部署nginx

二、环境

系统 widows
java 17.0.10
Jenkins 2.440.1
注：在windows上装，java和Jenkins的包尽量还是用新的，java8都找不到老版本的Jenkins.msi包了

Jenkins安装后建议改一下工作区，因为Jenkins就算你选择安装在D盘，但是还是会在C盘生成文件夹Jenkins，具体操作看这里

三、给Jenkins添加nodejs插件

1、在Manage Jenkins 页面选择Plugins

2、选择Available plugins页面，里面搜索nodejs,然后勾选安装

3、在Manage Jenkins 页面选择Tools,下拉到底部，点击nodejs安装

4、新增node版本，跟自己项目版本一致

四、新建主项目

1、工作台首页点击“新建Item”

2、输入项目名称，然后选择FreeStyle project

3、General 勾选 Discard old builds

4、源码管理选择Git，然后填上代码的git地址和分支

5、构建环境选择Provide Node & npm bin/ folder to PATH，然后选择node版本

6、Build Steps中添加构建步骤，选择Execute Windows batch command(windows选这个)

分别执行以下命令：

  1.rd /q /s D:\jenkins\workspace\main (主项目编译时执行此命令，如果存在mian目录就先删掉，因为后续所有项目编译完成后都移动到此目录下)

  2.npm install

  3.npm run build

  4.move dist ../main (移动打包后的文件并重命名为main文件夹)

五、新建子项目

1、新建子项目，操作步骤如上

2、git地址填入子项目的地址

3、构建触发器选择Build after other projects are built，并填入主项目的名字

4、构建环境添加方式跟主项目一致

5、构建步骤添加以下命令

  1.npm install

  2.npm run build

  3.move dist ../main/child (将子项目打包后的文件移动到main下并重命名)

注：构建后会在jenkins\workspace文件夹中生成一个main文件夹，里面包含了主项目及子项目的代码

如果不想放在workspace下，就修改move命令的第二个参数

六、结束

1、打包完成后效果,child文件夹中就是子项目代码

2、如果有多个子项目就重复新建子项目的步骤就行