Vue 項目部署到nginx服務器腳本

Vue 項目，作爲web開發新秀，深得大家的喜歡，對於Android開發者兼做web 項目來說，着實是一個很好的框架，

項目框架

Vue + element

Vue 項目打包

再package.json中配置打包項目

"scripts": {
// dev 本地環境運行 npm run dev
    "dev": "vue-cli-service serve",
    // 正式環境 npm run build:prod
    "build:prod": "vue-cli-service build",
    // 測試環境： npm run build:stage
    "build:stage": "vue-cli-service build --mode staging",
    "preview": "node build/index.js --preview",
    "lint": "eslint --ext .js,.vue src",
    "test:unit": "vue-cli-service test:unit",
    "test:ci": "npm run lint && npm run test:unit",
    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
    "new": "plop"
  },

好了， 配置好之後，進行打包，需要發佈到服務器，服務器需要兩個環境，即正式和測試

當然，再Android開發中發佈版本這種簡單的操作，是不需要考慮其他操作的，當公司內部需要大家臨時下載時：

• 放到蒲公英、fir.com
• 放到內網
• 其他

並且爲了減少自己的工作量，直接搭建jenkins,一鍵打包，上傳蒲公英等平臺，還可以郵件通知相關人員，釘釘通知、各種通知，哈哈，本着我Aandroid的開發態度，我希望部署到jenkins,然而，對於F5就可以查看成果的前端來說，我更希望，再項目工程中一件發佈， 搞啥呀，來個shell腳本 ，一腳搞定，這也是我web同事希望的

請看腳本

#!/bin/sh
echo "初始化環境..."
if [ ! -d "/dist/" ]; then
  echo "正在清理上次構建結果..."
#  rm -rf dist/
  echo "清理完畢"
  fi
echo "\n"
echo "請選擇部署環境 1： dev 2: production"
read -t 30 -p "請選擇部署環境(dev,)": environment
echo  "\n"
name="正式環境"
ip="ip"
if [ $environment == 1 ]; then
  name="測試環境"
  ip="ip"
fi
echo "正在構建...$name"
case $environment in
  "1")
  npm run build:stage
  echo "構建完畢， 準備同步到服務器.."
  scp -r ./dist op@ip:~/crm/
  ;;
  "2")
  npm run build:prod
  echo "構建完畢， 準備同步到服務器.."
  scp -r dist op@ip:~/crm
  ;;
esac
echo "同步完成"
echo "登錄服務器..."
if [ $environment == 1 ]; then
  echo "測試環境---》"
 sshName=op@$ip
echo "$sshName"
ssh op@$ip << remotessh
sudo -S rm -rf /var/www/html/ominichannelcrm/dist <<PASS
密碼
PASS
sudo -S mv crm/dist /var/www/html/ominichannelcrm/ <<PASS
echo "密碼"
PASS
remotessh
else
   sshName=op@$ip
echo "$sshName"
ssh op@$ip << remotessh
sudo -S rm -rf /var/www/html/ominichannelcrm/dist <<PASS
密碼
PASS
sudo -S mv crm/dist /var/www/html/ominichannelcrm/ <<PASS
echo "密碼"
PASS
remotessh
fi


echo "部署完成"

好了，這就一件完成了，使用的時候需要注意上述的幾個路徑，這能看懂啊