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 "部署完成"

好了，这就一件完成了，使用的时候需要注意上述的几个路径，这能看懂啊