部署環境：cat /proc/version
Linux version 3.10.0-862.el7.x86_64 (builder@kbuilder.dev.centos.org) (gcc version 4.8.5 20150623 (Red Hat 4.8.5-28) (GCC) )
一、搭建node環境：
1、下載安裝包至/usr/local，具體版本根據自己需要。
wget https://nodejs.org/download/release/v6.12.3/node-v6.12.3-linux-x64.tar.gz
2、解壓到指定目錄，更名，創建軟連接變為全局
wget https://nodejs.org/dist/v12.18.1/node-v12.18.1-linux-x64.tar.xz // 下載
tar xf node-v12.18.1-linux-x64.tar.xz // 解壓 （建議下載高版本）
tar -xzvf node-v6.12.3-linux-x64.tar.gz -C /usr/local
mv node-v6.12.3-linux-x64 nodejs #更名
#創建軟鏈接
ln -s /usr/local/nodejs/bin/npm /usr/local/bin/
ln -s /usr/local/nodejs/bin/node /usr/local/bin/
#安裝cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
ln -s /usr/local/nodejs/bin/cnpm /usr/local/bin/cnpm
3、配置環境變量vi /etc/profile，添加以下配置信息：
#nodejs export NODEJS_HOME=/nodejs export PATH=$NODEJS_HOME/bin:$PATH
export NODE_PATH=$NODEJS_HOME/lib/node_modules
4、配置文件生效
source /etc/profile
5、檢測
node -v
npm -v
此時node.js已經完成。
下面是打包有關安裝
6、安裝webpackage
npm install webpack -g --registry=https://registry.npm.taobao.org
7、安裝ruby
|
|
sudo yum install ruby
|
8、檢測ruby
ruby -v
9、安裝sass
sudo su -c "gem install sass"
一般會報錯，這里需先安裝
sudo yum install ruby-devel
報錯：
rb-inotify requires Ruby version >= 2.3.
查看ruby源
gem sources -l
#*** CURRENT SOURCES ***
#https://rubygems.org/
移除ruby源
gem sources --remove https://rubygems.org/
添加國內鏡像
#gem sources -a https://ruby.taobao.org/（報錯，已停止維護） #gem sources -a https://gems.ruby-china.org/（報錯，域名已更改） gem sources -a https://gems.ruby-china.com/
解決鏡像問題后，安裝成功
10、查看sass版本
sass -v Ruby Sass 3.7.4
11、安裝 autoconf （針對Error: Command failed: /bin/sh -c autoreconf -iv'）
sudo yum install autoconf
12、安裝libpng-devel（針對報錯：Error: pngquant failed to build, make sure that libpng-dev is installed......？）
yum install libpng-devel
13、安裝automake.noarch
sudo yum install automake
14、安裝libtool（針對error: possibly undefined macro: AC_PROG_LIBTOOL）
sudo yum install libtool
15、安裝nasm（針對error: no nasm (Netwide Assembler) found、mozjpeg pre-build test failed）
sudo yum install nasm
16、以上安裝完成后執行下面的命令，如果沒有error，就表示打包環境差不多了，warning警告可以忽略不管：
npm i --registry=https://registry.npm.taobao.org
17、目錄切至代碼路徑下，我的目錄是：/usr/local/jenkins/workspace/Vue-admin-test/frantend/admin，輸入打包命令：
npm run build
出現上圖提示，表示打包成功啦~~，而且會生成一個dist文件夾，這個就是我們需要發布到遠端服務器的所有文件。
!!!!如果以上操作還會報錯：類似Syntax Error: Error: Cannot find module 'gifsicle'
到項目文件夾下，（可以先備份一下項目以防萬一）刪除node_modules文件和package-lock.json文件。注意不是package.json（如果刪不掉，看下項目是不是打開了，關了再試試）
#執行一些命令
cnpm i
npm run build
二、jenkins部署
1.安裝插件工具NodeJs。安裝完成后進入全局工具配置，配置剛才安裝好的node環境，輸入node別名：node，輸入安裝目錄：在linux中的安裝目錄。
安裝依賴插件:
config-file-provider (可選擇離線下載)
安裝Publish Over SSH插件用於SSH連接遠程的服務器：打開“系統管理”--“管理插件” 搜索 Publish Over SSH 然后勾選安裝；
打開“系統管理”--“系統設置” 找到 “Publish over SSH” 項 ，我這里遠程服務器用的是ssh登錄，通過ppk密鑰進行連接，所以我的配置如圖，如果是帳號密碼登錄的Passphrase填寫密碼Username填寫用戶名，path to key 為空就可以。
2.新建vue項目
1）新建任務–>新建一個自由風格的軟件項目–>輸入任務名稱點擊確定
2）配置：源碼管理，選擇git，輸入碼雲中的項目連接，添加賬號憑證
3）配置構建環境： 選擇日志打印，配置node，選擇全局配置中node
4）構建相關命令配置
echo $PATH cd frantend/admin rm -rf vue.config.js rm -rf /usr/local/jenkins/workspace/Vue-admin-test/frantend/admin/src/utils/request.js cp /usr/local/config/vue-admin/vue.config.js /usr/local/jenkins/workspace/Vue-admin-test/frantend/admin cp /usr/local/config/vue-admin/request.js /usr/local/jenkins/workspace/Vue-admin-test/frantend/admin/src/utils npm -v node -v npm install npm run build sleep 15s zip -r dist.zip dist
說明： echo $PATH表示輸出環境變量的值，npm -v和node -v表示查看node和npm的版本。輸出這三個值的目的主要是為了在構建的時候可以在編譯窗口上查看相關版本和環境變量信息。
#查看vue.config.js，需要單獨修改該文件中的target，以免每次從git拉取代碼，都被覆蓋。（注：生產環境的地址也要修改后再打包！！！！） vi vue.config.js
5)構建成功后，需要將dist.zip傳輸到遠端服務器vue-test（系統配置中配置ssh遠端服務器連接信息、默認工作路徑:/acow）
source files：jenkins打包路徑及生成dist文件的目錄
remove prefix：需要去掉的前綴目錄，只傳輸zip文件
remote dict:需要發布到遠端服務器的保存目錄
exec command：文件傳輸成功后，需要執行的命令
cd /acow unzip -o dist.zip -C dist #解壓文件為dist文件夾 rm -rf dis.zip #刪除zip包
6）保存后點擊“立即構建”查看任務是否構建完成，Console Output 菜單可以查看構建日志。
以上步驟，vue打包成功。
三、使用nginx代理
1）安裝參考教程：https://www.cnblogs.com/july-1016/p/14098571.html
whereis nginx#找到nginx安裝目錄 vi /usr/local/nginx/conf/nginx.conf #編輯配置文件
2）在server節點下添加vue代理服務：listen ：監聽端口 location/root ：項目路徑
3）使配置生效,未找到命令：https://www.cnblogs.com/zhangzhonghui/p/9999827.html
sbin/nginx -s reload sbin/nginx -s stop sbin/nginx
4）訪問ip地址查看效果,能正常訪問頁面，就代表nginx代理成功啦~~
瀏覽器輸入代理ip地址+監聽端口：http://192.168.31.22:80
原文件：https://www.cnblogs.com/super-ldc/p/12095107.html https://www.rootop.org/pages/4155.html