Vue-CLI 4.x 自动部署项目至服务器

Vue-CLI 4.x 脚手架搭建的vue项目, 利用 scp2+cross-env 跨平台自动化部署到静态文件Nginx服务器

一、安装 scp2+cross-env

npm install --save-dev scp2 cross-env

二、配置测试/生产环境，服务器SSH远程登陆账号信息，自动化上传脚本

1）在项目根目录创建生产环境变量 .env.production

# 生产环境

# 环境标志
ENV = 'production'

# 部署到正式服务器
VUE_APP_SERVER_ID = 1

2）在项目根目录创建测试环境变量 .env.staging

# 测试环境
NODE_ENV = production

# 环境标志
ENV = 'staging'

# 部署到测试服务器
VUE_APP_SERVER_ID = 0

3）服务器SSH远程登陆账号信息 

/*
 *定义多个服务器账号 及 根据 SERVER_ID 导出当前环境服务器账号
 */
const SERVER_LIST = [
  {
    id: 0,
    name: "测试环境",
    domain: "http://comm.zhixingonline.com", // 域名
    host: "148.70.182.143", // ip
    port: 22, // 端口
    username: "root", // 登录服务器的账号
    password: "", // 登录服务器的账号
    path: "/www/wwwroot/comm.zhixingonline.com", // 发布至静态服务器的项目路径
  },
  {
    id: 1,
    name: "生产环境",
    domain: "http://comm.zhixingonline.com",
    host: "148.70.182.143",
    port: 22,
    username: "root",
    password: "",
    path: "/www/wwwroot/comm.zhixingonline.com",
  },
];

4）自动化上传脚本

  // rm 删除dist文件，\n 是换行 换行执行
  conn.exec(`rm -rf ${server.path}\n`, function (err, stream) {
    if (err) {
      throw err;
    }
    stream
      .on("close", function (code, signal) {
        // 在执行shell命令后，把开始上传部署项目代码放到这里面
        spinner.start();
        scpClient.scp(
          "./dist/build/h5",
          {
            host: server.host,
            port: server.port,
            username: server.username,
            password: server.password,
            path: server.path,
          },
          function (err) {
            spinner.stop();
            if (err) {
              console.log(chalk.red("发布失败.\n"));
              throw err;
            } else {
              console.log(
                chalk.green(
                  `Success! 成功发布到${server.name}服务器! \n访问域名:${server.domain}`
                )
              );
            }
          }
        );

        conn.end();
      })
      .on("data", function (data) {
        console.log("STDOUT: " + data);
      })
      .stderr.on("data", function (data) {
        console.log("STDERR: " + data);
       });
  });

三、设置 scripts 命令

"scripts": {
  "dev": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "build:stage": "vue-cli-service build --mode staging",
  "deploy": "npm run build && cross-env NODE_ENV=production node ./deploy",
  "deploy:stage": "npm run build:stage && cross-env NODE_ENV=staging node ./deploy"
},

四、完整代码资源

Vue-CLI 4.x 自动部署项目至服务器