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


自此大功告成!!!


相关文章
|
1月前
|
JavaScript 数据可视化
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
这篇文章介绍了如何使用vue-cli 2和3版本来创建Vue项目,并详细说明了两者之间的主要区别。
77 5
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
|
26天前
|
JavaScript 容器
乾坤qiankun框架搭建 主应用为vue3的项目。
乾坤qiankun框架搭建 主应用为vue3的项目。
133 2
|
1月前
|
JavaScript
Vue CLi脚手架创建第一个VUE项目
Vue CLi脚手架创建第一个VUE项目
35 3
|
17天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
3天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
7天前
|
jenkins Java 持续交付
Gitee+Jenkins+SonarQube代码上线的实战操作
通过以上步骤,就可以实现基于Gitee、Jenkins和SonarQube的代码上线流程,确保代码的质量和上线过程的自动化和可控性。在实际操作中,可以根据项目的具体需求和环境进行适当的调整和优化。
|
1月前
|
JavaScript 数据可视化
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
这篇文章详细介绍了Vue CLI 3版本创建项目时的Runtime-Compiler和Runtime-only两种模式的区别、Vue程序的运行过程、render函数的使用、eslint的关闭方法,以及Vue CLI 2和3版本配置文件的不同和脚手架3版本创建项目的配置文件配置方法。
35 3
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
|
20天前
|
JavaScript
如何在 Vue 项目中选择合适的模块格式
【10月更文挑战第20天】选择合适的模块格式需要综合考虑多个因素,没有一种绝对正确的选择。需要根据项目的具体情况进行权衡和分析。在实际选择过程中,要保持灵活性,根据项目的发展和变化适时调整模块格式。
19 7
|
16天前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
20天前
|
JavaScript 前端开发 编译器
在 Vue 项目中使用 ES 模块格式的优点
【10月更文挑战第20天】在 Vue 项目中使用 ES 模块格式具有众多优点,这些优点共同作用,使得项目能够更高效、更可靠地开发和运行。当然,在实际应用中,还需要根据项目的具体情况和需求进行合理的选择和配置。
25 6