快捷導(dǎo)航

Vue項(xiàng)目部署到j(luò)enkins的實(shí)現(xiàn)

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

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

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

需要安裝yarn命令，但是yarn是通過(guò)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

配置到j(luò)enkins上

在這里插入圖片描述

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干了什么

首先打印出了工作空間

在這里插入圖片描述

然后通過(guò)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ā)到遠(yuǎn)程主機(jī)里，除了解壓縮之外，還要記得給自己的文件賦權(quán)

在這里插入圖片描述

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;

到此這篇關(guān)于Vue項(xiàng)目部署到j(luò)enkins的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue項(xiàng)目部署到j(luò)enkins內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

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

相關(guān)文章

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