jenkins自动部署vue项目(扫坑实战)

简介: jenkins自动部署vue项目(扫坑实战)

部署过程遇到的2个问题:


npm install 后的 /chromedriver这个包打不进去

自己安装nodejs路径配置后,一直说 我的nodejs安装目录下()/usr/local/bin )下没有可执行文件


环境


centos7


解决问题:


针对1:

可以在npm install前,执行这个命令。下载阿里云的chromedriver

npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver &&

1dc618a0ed9580ce8bfa6facb208c08f.png

针对2.采用插件方式,不自己安装了(以前实验过程中,自动安装其实也行来,后面不试出来,如果可以,后面文章继续补充)

安装的是 Generic Webhook Trigge插件

这里勾选下

这里勾选然后根据自己的nodejs版本输入即可

5d4c6812c8535adbb050f4ddf2e1bce8.png

OK,下面是详细教程:


1第一步下载插件


① NVM wrapper

1dc618a0ed9580ce8bfa6facb208c08f.png


② nodejs

5d4c6812c8535adbb050f4ddf2e1bce8.png

③ 远程连接

46a9d80a6e05e4e3b19d57a0ee70bcdf.png


2. 新建项目


1dc618a0ed9580ce8bfa6facb208c08f.png

5d4c6812c8535adbb050f4ddf2e1bce8.png


46a9d80a6e05e4e3b19d57a0ee70bcdf.png


66ba272a0bfc97be54a5fa679e3d5482.png

88b9988b40447cb37c7e3c492d49867f.png80308c27701d3aead18db6c7b167f308.png1014213c4196c8798c8417b952a8a253.png


npm config set registry https://registry.npm.taobao.org/ &&
echo “1111===” &&
npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver &&
echo “1112221===” &&
npm install &&
echo “2222===” &&
rm -rf laborwx &&
echo “333===” &&
npm run build


1dc618a0ed9580ce8bfa6facb208c08f.png

5d4c6812c8535adbb050f4ddf2e1bce8.png



最好点击保存。


运行效果如下图:

46a9d80a6e05e4e3b19d57a0ee70bcdf.png


自此大功告成!!!


相关文章
|
10月前
|
人工智能 自然语言处理 JavaScript
通义灵码2.5实战评测:Vue.js贪吃蛇游戏一键生成
通义灵码基于自然语言需求,快速生成完整Vue组件。例如,用Vue 2和JavaScript实现贪吃蛇游戏:包含键盘控制、得分系统、游戏结束判定与Canvas动态渲染。AI生成的代码符合规范,支持响应式数据与事件监听,还能进阶优化(如增加启停按钮、速度随分数提升)。传统需1小时的工作量,使用通义灵码仅10分钟完成,大幅提升开发效率。操作简单:安装插件、输入需求、运行项目即可实现功能。
479 4
 通义灵码2.5实战评测:Vue.js贪吃蛇游戏一键生成
|
12月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
619 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
8月前
|
jenkins Java 持续交付
使用Jenkins完成springboot项目快速更新
本文介绍了使用Jenkins和WinSW实现SpringBoot项目自动化部署的完整流程。首先讲解了Jenkins作为持续集成工具的作用,然后详细说明了环境准备步骤:包括JDK版本管理、WinSW服务配置(含XML文件修改)以及bat启动脚本编写。重点演示了Jenkins的项目配置方法,包括源码管理设置和构建步骤中的Windows批处理命令调用。通过这套方案,开发者只需推送代码到Git仓库,即可触发Jenkins自动完成项目构建、服务重启等全流程,显著提升部署效率。文章还提到IDEA的Jenkins插件可进
333 1
|
7月前
|
Java jenkins 应用服务中间件
结合Jenkins与Tomcat,实施Maven项目的自动构建和部署流程。
任何项目构建和部署的自动化流程,总离不开对各个环节精细把控与密切配合。涉及到源代码管理、构建工具、持续集成服务器以及最终的运行时环境的协调。通过上述简洁实用的步骤,可以实现Maven项目从源代码到运行状态的无缝过渡,进而提升软件开发的效率与质量。
381 0
|
10月前
|
JavaScript API 容器
Vue 3 中的 nextTick 使用详解与实战案例
Vue 3 中的 nextTick 使用详解与实战案例 在 Vue 3 的日常开发中,我们经常需要在数据变化后等待 DOM 更新完成再执行某些操作。此时,nextTick 就成了一个不可或缺的工具。本文将介绍 nextTick 的基本用法,并通过三个实战案例,展示它在表单验证、弹窗动画、自动聚焦等场景中的实际应用。
919 17
|
9月前
|
JavaScript 前端开发 UED
Vue 项目中如何自定义实用的进度条组件
本文介绍了如何使用Vue.js创建一个灵活多样的自定义进度条组件。该组件可接受进度段数据数组作为输入,动态渲染进度段,支持动画效果和内容展示。当进度超出总长时,超出部分将以红色填充。文章详细描述了组件的设计目标、实现步骤(包括props定义、宽度计算、模板渲染、动画处理及超出部分的显示),并提供了使用示例。通过此组件,开发者可根据项目需求灵活展示进度情况,优化用户体验。资源地址:[https://pan.quark.cn/s/35324205c62b](https://pan.quark.cn/s/35324205c62b)。
425 0
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
474 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
前端开发 JavaScript Java
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
608 13
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
|
SQL JavaScript 安全
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
544 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
|
人工智能 JavaScript 安全
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
643 13
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战

热门文章

最新文章

推荐镜像

更多