脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue项目部署到jenkins

Vue项目部署到jenkins的实现

 更新时间：2022年02月16日 14:15:17   作者：舌尖上的蛋炒饭  
本文主要介绍了Vue项目部署到jenkins的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

服务器配置环境

需要安装yarn命令，但是yarn是通过npm安装的，所以要先安装npm，npm又是node附带的，所以要安装node

[root@hecs-82454 local]# pwd
/usr/local
[root@hecs-82454 local]# wget https://nodejs.org/dist/v14.15.4/node-v14.15.4-linux-x64.tar.xz
[root@hecs-82454 local]# tar -xf node-v14.15.4-linux-x64.tar.xz 
[root@hecs-82454 local]# mv node-v14.15.4-linux-x64 node
[root@hecs-82454 local]# cd /usr/bin
[root@hecs-82454 bin]# ln -s /usr/local/node/bin/node node
[root@hecs-82454 bin]# ln -s /usr/local/node/bin/npm npm
[root@hecs-82454 bin]# find / -name yarn
/var/lib/jenkins/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/node/lib/node_modules/corepack/shims/yarn
/var/lib/jenkins/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/node/lib/node_modules/corepack/shims/nodewin/yarn
/usr/local/node/bin/yarn
/usr/local/node/lib/node_modules/yarn
/usr/local/node/lib/node_modules/yarn/bin/yarn
[root@hecs-82454 bin]# ln -s /usr/local/node/bin/yarn yarn
[root@hecs-82454 bin]# yarn -v
1.22.17
[root@hecs-82454 bin]# npm -v
6.14.10
[root@hecs-82454 bin]# node -v
v14.15.4

配置到jenkins上

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

git clean -df;
git checkout .;
rm -rf node_modules;
rm -rf package-lock.json;
yarn cache clean;
yarn config set registry https://registry.npm.taobao.org -g;
yarn install --registry=https://registry.npm.taobao.org/;
yarn build;

看看jenkins干了什么

首先打印出了工作空间

在这里插入图片描述

然后通过build命令生成了dist文件，这就是我们想要的

在这里插入图片描述

[root@hecs-82454 bin]# cd /var/lib/jenkins/workspace/vueDataCenter
[root@hecs-82454 vueDataCenter]# ls
babel.config.js  dist  images  node_modules  package.json  public  README.md  src  vue.config.js  yarn.lock

如果你要需要将打包好的dist文件发到远程主机里，除了解压缩之外，还要记得给自己的文件赋权

在这里插入图片描述

tar -xzvf /czb/publish/data/mstest3/dist.tar.gz -C /czb/publish/data/mstest3;
cp -r /czb/publish/data/mstest3/dist/* /czb/www/mstest3/;
chmod  755 /czb/www/mstest3/* -R;

到此这篇关于Vue项目部署到jenkins的实现的文章就介绍到这了,更多相关Vue项目部署到jenkins内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！ 

您可能感兴趣的文章:

相关文章

  • vue如何点击多个tab标签打开关闭多个页面

    vue如何点击多个tab标签打开关闭多个页面

    这篇文章主要介绍了vue如何点击多个tab标签打开关闭多个页面，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • 如何使用VUE+faceApi.js实现摄像头拍摄人脸识别

    如何使用VUE+faceApi.js实现摄像头拍摄人脸识别

    Face-api.js是一个JavaScript API,是基于tensorflow.js核心API 的人脸检测和人脸识别的浏览器实现,这篇文章主要给大家介绍了关于如何使用VUE+faceApi.js实现摄像头拍摄人脸识别的相关资料,需要的朋友可以参考下
    2023-05-05
  • vue在mounted中window.onresize不生效问题及解决

    vue在mounted中window.onresize不生效问题及解决

    这篇文章主要介绍了vue中在mounted中window.onresize不生效问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • 使用Webpack 搭建 Vue3 开发环境过程详解

    使用Webpack 搭建 Vue3 开发环境过程详解

    这篇文章主要介绍了使用Webpack 搭建 Vue3 开发环境过程详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • vue引用json文件的方法小结

    vue引用json文件的方法小结

    这篇文章主要介绍了vue引用json文件,解决怎么从控制台把数据移到json文件中，只需要直接右击复制值即可，需要的朋友可以参考下
    2022-09-09
  • vue组件间传值的6种方法总结

    vue组件间传值的6种方法总结

    这篇文章主要给大家介绍了关于vue组件间传值的6种方法,组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,需要的朋友可以参考下
    2023-08-08
  • vue.js动态数据绑定学习笔记

    vue.js动态数据绑定学习笔记

    这篇文章主要为大家详细介绍了vue.js动态数据绑定学习笔记，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05
  • VUE和Antv G6实现在线拓扑图编辑操作

    VUE和Antv G6实现在线拓扑图编辑操作

    这篇文章主要介绍了VUE和Antv G6实现在线拓扑图编辑操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • 关于Vue中img动态拼接src图片地址的问题

    关于Vue中img动态拼接src图片地址的问题

    这篇文章主要介绍了关于Vue中img动态拼接src图片地址的问题,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-10-10
  • 教你60行代码实现一个迷你响应式系统vue

    教你60行代码实现一个迷你响应式系统vue

    这篇文章主要为大家介绍了教你60行代码实现一个迷你响应式系统详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪<BR>
    2023-03-03

最新评论