Jenkins+docker容器部署前端Vue项目详细教程

Ne0inhk

21 Mar 2026 — 11 min read

Vue.js 项目自动化部署实战 | Jenkins CI/CD 流水线配置 | Docker 容器化部署教程。本文详细介绍如何用 Jenkins 和 Docker 构建 Vue 项目的自动化部署环境，包含多阶段构建优化、Pipeline 脚本编写、容器编排等实用技巧。

为大家整理一份从0-1详细的流程吧！

是一步一步完成的，有兴趣的可以看看。

1、cmd输入ver查看电脑系统。

2、在Windows系统，win+x按A打开PowerShell，开启Hyper-v功能。

输入命令：Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Hyper-V -All

如果询问是否重启，直接输入Y并按回车。

3、重启计算机之后

第一步cmd输入：systeminfo | find "System Type"或者systeminfo | find "系统类型"并回车，查看处理器架构信息，这一步是为了查看本系统适合安装那个版本的docker，检测类型为： x64-based PC，所以选择下载Download for Windows-AMD64

第二步：访问Docker官网：https://www.docker.com/products/docker-desktop/ ，

选择下载Download for Windows-AMD64

4、下载完成cocker双击点击安装

第一步双击：

第二步会出现弹窗：全选点击ok

Use WSL 2 instead of Hyper-V (recommended)：使用WSL 2而不是Hyper-V（推荐）。

Allow Windows Containers to be used with this installation：允许在此安装中使用 Windows 容器。

Add shortcut to desktop：添加到桌面快捷方式。

第三步：等待安装

第四步：安装完成后，点击Close

第五步：桌面会出现docker图标，双击打开

第六步：点击“Accept”按钮以继续安装

第七步：有账号就登陆

最后登录成功！

注意：这里有个问题需要注意，如果打开docker工具后，如果出现linux版本太旧了则会有提示命令，那么直接复制到cmd更新，如下几图

更新成功之后，会自动弹出以下页面，关闭就行

再去开docker就可以啦！

5、docker Desktop已经安装成功，启动和验证docker Desktop

第一步：win+x 直接按A建，打开PowerShell输入命令：docker --version查看结果

第二步：运行基础镜像：hello-world 试一试：docker run -rm hello-world

成功！

第三步：创建第一个j名字为jenkins容器：docker run -a --name jenkins -p 8080:8080 -p 50000:50000 -v jenkins_home:/var/jenkins_home jenkins/jenkins:lts

命令解释：
-d: 在后台运行容器。

--name jenkins: 给容器起个名字。

-p 8080:8080: 将你电脑的8080端口映射到容器的8080端口（Jenkins网页界面）。

-p 50000:50000: 映射50000端口（用于代理通信）。

-v jenkins_home:/var/jenkins_home: 将容器内的数据卷挂载到本地，这样即使删除容器，你的Jenkins数据（如任务、配置）也不会丢失。

第四步：打开docker Desktop，可以在Containers中看到名称为jenkins的镜像。

基础命令：

运行镜像后powershell查看容器状态

查看容器是否正在运行

docker ps

查看所有容器（包括停止的）

docker ps -a

查看 Jenkins 启动日志

docker logs jenkins

停止并删除旧容器

docker stop jenkins(停止或者开始（stop /start）容器名为jenkins的容器)

docker rm jenkins(删除容器名为robenkin 的容器)

强制删除容器（无论是否运行）

docker rm -f jenkins

第五步：很重要的一步获取出事管理员密码

PowerShell输入：docker exec jenkins cat /var/jenkins_home/secrets/initialAdminPassword

6、打开浏览器，访问：http://localhost:8080，正式访问jenkins

第一步：复制密码粘贴到管理员密码中点击继续，打开jenkins

第二步：安装，这里我选择推荐-等待插件安装完成-创建管理员账户-配置实例URL（保持默认即可）

第三步：等待安装

第四步：完成后创建管理员账户，保存并完成

第五步：显示实例配置：http://localhost:8080/ 点击保存并完成

第六步：点击开始使用jenkins

第七步：打开的页面如下

第八步：基础插件安装，右上角点击设置或者浏览器直接输入：http://localhost:8080/manage/，目的是打开安装插件的页面

第九步：选择插件管理

第十步：必装插件和插件页面左侧菜单介绍

必装插件

首先安装这几个个核心插件：

NodeJS Plugin：用于在 Jenkins 中运行 Node.js，Vue3 项目需要 Node.js 环境来执行 npm install和 npm run build。

Gitee Plugin或者搜索Gitee：用于连接你的 Gitee 仓库，支持 Webhook 自动触发构建，方便从 Gitee 拉取代码。

Git Plugin：通常已经预装，用于 Git 版本控制操作，如果已安装就不用重复安装。

Pipeline：必装，用于创建流水线任务，支持编写 Jenkinsfile，将构建过程代码化，更容易维护和版本控制。

Docker Pipeline或者Docker Plugin：用于在流水线中操作 Docker，构建 Docker 镜像、运行容器等。

Publish Over SSH：（可选），如果需要将构建产物部署到远程服务器，如果 Jenkins 和部署在同一台机器则不需要。

左侧菜单介绍

Updates(更新)：显示可更新的插件列表。在这里，你可以看到已安装插件中有哪些有可用的更新版本，并进行更新操作。

Available plugins：(可用插件)：浏览和安装新插件的页面。你可以在这里搜索并安装Jenkins社区提供的各种插件。

Installed plugins： (已安装插件)：查看当前已经安装的插件列表。你可以在这里管理已安装的插件，例如禁用、启用、卸载或升级插件。

Advanced settings：(高级设置)：进入插件管理的高级配置页面。通常包括配置插件更新站点、代理设置等高级选项。

Download progress：(下载进度)：

第十一步：插件安装完毕重启jenkins

最重要的要开始啦！！！

7、现在jenkins基础配置已经完成

开始配置核心工具和创建一个自动化部署任务，目的是把 Vue 项目和 Jenkins 连接起来。

将vue项目推送到git仓库就不用解释了。

如果遇到代码推送新仓库ssh的问题，可以快速生成，不需要就不管。

绑定虚拟邮箱，输入命令获取ssh：ssh-keygen -t ed25519 -C "随便一个邮箱都行"。

直接复制新的ssh去git仓库添加：type $HOME\.ssh\id_ed25519.pub | clip。

第一步：关联vue和jenkins，在jenkins首页点击设置

第二步：选择全局工具配置

第三步：拉到最下方，找到NodeJS，输入别名Nodejs(名称后面再Pipeline流水线中会用到)，勾选自动安装，在版本处下拉选择与自己项目兼容的node版本，点击保存。

第四步：添加getee账户凭证：让 Jenkins 有权限访问 Gitee 上的代码仓库，还是在jenkins点击设置，在安全中选择凭据管理

选择System

点击全局凭据

第五步：打开全局凭证之后，按如下填写

类型：选择 Username with password。

用户名：你的 Gitee 登录用户名/邮箱。

密码：你的 Gitee 登录密码。

ID 和描述：可以留空，系统会自动生成。为了清晰，建议在描述里写上“Gitee登录凭据”。

第六步：添加成之后，就会看到下图

第七步：准备完成后，创建第一个 Pipeline 任务，返回到jenkins首，点击左侧新建Item

输入任务名称，选择Pipeline流水线点击确定。

第八步：将会出现General常规配置页面，直接滑动到下方Definition部分选择Pipeline script

在脚本中输输入：注意git branch: 'master', 这个是对应git的分支的

pipeline { agent any tools { nodejs "Nodejs" } stages { stage('拉取代码') { steps { git branch: 'master', url: '你对应的git地址替换', credentialsId: '找到你的credentialsId替换' } } stage('安装依赖') { steps { sh ''' # Element Plus 项目常见依赖 npm config set registry https://registry.npmmirror.com # 安装依赖（包含 element-plus 和图标库） npm install # 如果需要，单独安装 element-plus 图标 npm list @element-plus/icons-vue || npm install @element-plus/icons-vue ''' } } stage('构建项目') { steps { sh 'npm run build' } } } }