美文网首页vuevue
vue 部署 脚本 自动部署

vue 部署 脚本 自动部署

作者: 代码界的小学生 | 来源:发表于2018-08-20 18:41 被阅读159次

    用VueJs开发快两年了,不得不说Vue是个好框架,当时在前期部署的时候每次都很头疼,因为次次都要很麻烦,不同的环境,测试机, 需要管理很多ip用户名,所以想封装一个脚本,只需要修改对应的配置文件,就可以一个命令去部署

    废话不多说,在这个脚本运行前,需要配置部署机器的ssh key 到服务器的用户下,具体可以参考
    https://www.jianshu.com/p/fab3252b3192(ps:虽然很想自己写一个详细的,无奈手太懒)

    看看webpack的配置config.js 中 assetsPublicPath 配置项 为 /

    然后在vue项目根目录下创建两个文件

    deploy.conf

    prod_branch=生产分支名
    prod_host=生产机器ip
    prod_user=生产机器用户
    prod_path=项目路径
    
    test_branch=测试环境分支名
    test_host=测试环境机器ip
    test_user=测试环境机器用户
    test_path=测试环境项目路径
    

    deploy.sh

    #!/bin/sh
    #获取环境名
    env=''
    
    if [ x$1 != x ];then
        env=$1
    else
        env='prod'
    fi
    
    #获取当前分支名
    curr_branch=`git symbolic-ref --short -q HEAD`
    echo '当前工作分支 => '${curr_branch}'\n'
    
    echo '读取配置文件:'
    deploy_branch=`sed '/^'${env}_branch'=/!d;s/.*=//' deploy.conf`
    deploy_host=`sed '/^'${env}_host'=/!d;s/.*=//' deploy.conf`
    deploy_user=`sed '/^'${env}_user'=/!d;s/.*=//' deploy.conf`
    deploy_path=`sed '/^'${env}_path'=/!d;s/.*=//' deploy.conf`
    echo '分支 => '${deploy_branch}
    echo '地址 => '${deploy_host}
    echo '用户 => '${deploy_user}
    echo '路径 => '${deploy_path}
    echo '\n'
    
    echo '储存当前修改'
    git stash 
    echo '\n'
    
    echo '切换到需发布的分支 => '${deploy_branch}
    git checkout $deploy_branch
    echo '\n'
    
    echo '编译项目'
    npm run build
    echo '\n'
    
    echo '删除老版本'
    ssh ${deploy_user}@${deploy_host} "rm -rf "${deploy_path}
    echo '上传新版本'
    scp -r ./dist ${deploy_user}@${deploy_host}:${deploy_path}
    echo '\n'
    
    echo '切回工作分支 => '${curr_branch}
    git checkout $curr_branch
    echo '\n'
    
    echo '释放修改'
    git stash pop
    echo '\n'
    
    echo '部署成功'
    

    使用 sh deploy.sh prod sh deploy.sh test 或者配置其他环境

    后期我会把它封装成个npm包,直接用命令配置解决这些问题

    相关文章

      网友评论

        本文标题:vue 部署 脚本 自动部署

        本文链接:https://www.haomeiwen.com/subject/xreliftx.html