Vue項目部署到jenkins的實現(xiàn)

更新時間：2022年02月16日 14:15:17 作者：舌尖上的蛋炒飯

本文主要介紹了Vue項目部署到jenkins的實現(xiàn)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

服務器配置環(huán)境

需要安裝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文件發(fā)到遠程主機里，除了解壓縮之外，還要記得給自己的文件賦權

在這里插入圖片描述

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的實現(xiàn)的文章就介紹到這了,更多相關Vue項目部署到jenkins內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Jenkins?Sidebar?Link插件實現(xiàn)添加側(cè)邊欄功能詳解

vue項目打包部署_nginx代理訪問方法詳解
今天小編就為大家分享一篇vue項目打包部署_nginx代理訪問方法詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
vue - props 聲明數(shù)組和對象操作
這篇文章主要介紹了vue - props 聲明數(shù)組和對象操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
vue element-ui 綁定@keyup事件無效的解決方法
遇到vue element-ui 綁定@keyup事件無效的問題怎么解決？下面小編就為大家分享一篇vue element-ui 綁定@keyup事件無效的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
vue3通過組合鍵實現(xiàn)換行操作的示例詳解
這篇文章主要為大家詳細介紹了vue3如何通過組合鍵,例如command+Enter、shift+Enter、alt + Enter,實現(xiàn)換行操作,感興趣的可以了解下
2024-03-03
vue項目中使用tinymce編輯器的步驟詳解
本文分步驟給大家介紹了vue項目中使用tinymce編輯器的方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-09-09
Vuex持久化插件(vuex-persistedstate)解決刷新數(shù)據(jù)消失的問題
這篇文章主要介紹了Vuex持久化插件(vuex-persistedstate)-解決刷新數(shù)據(jù)消失的問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-04-04
詳談vue中的rules表單驗證(常用)
這篇文章主要介紹了關于vue中的rules表單驗證(常用)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-06-06
Vue3中的動畫過渡實現(xiàn)技巧分享
在現(xiàn)代的前端開發(fā)中,用戶體驗的重要性不言而喻,為了讓應用程序更加生動和引人注目,動畫和過渡效果是必不可少的元素,本文將以 Vue3 為基礎,深入探討如何在應用程序中實現(xiàn)動畫過渡,以及一些技巧和最佳實踐,需要的朋友可以參考下
2025-01-01
vue實現(xiàn)跨域的方法分析
這篇文章主要介紹了vue實現(xiàn)跨域的方法,結(jié)合實例形式分析了vue.js跨域的原理與相關實現(xiàn)技巧,需要的朋友可以參考下
2019-05-05
Vue?ElementUI?table實現(xiàn)雙擊修改編輯某個內(nèi)容的方法
在實現(xiàn)表格單元格雙擊編輯功能時,需使用@cell-dblclick事件來觸發(fā)雙擊操作,將單元格切換為input輸入框,通過ref引用和綁定失焦及回車事件來確認編輯,同時,需要處理編輯數(shù)據(jù)的更新和方法邏輯的完善
2024-09-09