vue分环境自动化部署前端项目__Vue.js
发布于 5 天前 作者 banyungong 101 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

前言

        各位小伙伴们,大家好!今天我们来说一下vue项目如何分环境自动化部署,提到到自动化部署,有些小伙伴可能想到了jenkins,这个也是本人公司目前在用的一个方案,不过考虑到部署jenkins需要搭建java环境,对组内一些小伙伴还是不够友好,本文带大家了解使用scp2插件完成自动化部署

正文

  1. 既然是了解vue项目的自动化部署,首先需要本地搭建一个vue的项目(通过脚手架3.x和4.x版本都可以)然后使用npm下载本文的主角scp2插件,环境搭建以及插件下载不做赘述;
  2. 提到vue分环境,大家肯定都知道,需要在项目根目录下新建.env.xxx格式的文件,假设我们需要部署一个stage环境,我们可以在项目根目录新建一个.env.stage文件,内容如下:

    NODE_ENV = 'production'
    VUE_APP_BASE_URL = ''
    VUE_APP_TITLE = ''
    VUE_APP_SERVER_HOST = ""
    VUE_APP_SERVER_PORT = ""
    VUE_APP_SERVER_USER = ""
    VUE_APP_SERVER_PWD = ""
    VUE_APP_SERVER_PATH = ""
    VUE_APP_DIST = "dist-stage"
    其中 VUE_APP_DIST = "dist-stage" 用来自定义打包文件夹名称,方便部署的时候区分不同环境包,可以在vue.config.js配置环境变量 outputDir: process.env.VUE_APP_DIST || "dist"
  3. 在项目根目录下创建deploy文件夹,在deploy文件夹下新建build.js文件,用于写入我们的部署脚本;
  4. package.jsonscripts加入我们需要执行的命令

    "deploy:stage": "node deploy/build.js stage"

    其中stage就是我们需要携带的环境参数(也可以通过NODE_ENV=XXX来指定,这样就可以直接获取环境变量)执行node命令携带的附加参数可以通过process.argv来获取,从而我们就可以区分当前需要打包的环境
    const args = process.argv.splice(2);
    const env = args[0];
    const fs = require("fs");
    const path = require("path");
    // env 判断打包环境指定对应的路径
    const envfile = `../.env.${env}`;
    // env环境变量的路径
    const envPath = path.resolve(__dirname, envfile);
    
    我们已经获取当前部署环境,以及对应环境配置文件所在的具体位置,接下来需要读取对应配置文件信息,读取文件此处通过一个parse方法,进行分行读取内容并解析成keyvalue的键值对存入一个对象供使用;
    const parse = src => {  
      // 解析KEY=VAL的文件  
      const res = {};  
      src.split("\n").forEach(line => {   
        const keyValueArr = line.match(/^\s*([\w\.\-]+)\s*=\s*(.*)?\s*$/);    
        if (keyValueArr != null) {            const key = keyValueArr[1];      
          let value = keyValueArr[2] || "";      
          const len = value ? value.length : 0;      
          if (len > 0 && value.charAt(0) === '"' && value.charAt(len - 1) === '"') {  
             value = value.replace(/\\n/gm, "\n");      
           }      
          value = value.replace(/(^['"]|['"]$)/g, "").trim();      
          res[key] = value;   
        }  
      });  
      return res;
    };
    
  5. 至此我们已经可以区分环境并得到不同环境的服务器参数,执行scp2部署命令即可,完整内容如下:
    const client = require("scp2");
    const args = process.argv.splice(2);
    const env = args[0];const fs = require("fs");
    const path = require("path");
    // env 判断打包环境指定对应的路径
    const envfile = `../.env.${env}`;
    // env环境变量的路径
    const envPath = path.resolve(__dirname, envfile);
    // env对象const 
    envObj = parse(fs.readFileSync(envPath, "utf8"));
    // 获取服务器配置
    const SERVER = {  
      host: envObj["VUE_APP_SERVER_HOST"],  
      username: envObj["VUE_APP_SERVER_USER"],  
      password: envObj["VUE_APP_SERVER_PWD"],  
      port: envObj["VUE_APP_SERVER_PORT"],  
      path: envObj["VUE_APP_SERVER_PATH"]
    };
    const dist = envObj["VUE_APP_DIST"];
    console.log(envObj);
    client.scp(`./${dist}/`, SERVER, function(err) { 
      if (!err) {    
        console.log(`已上传至${env}环境,scp2工具上传完毕`);  
      } else {    
        console.log("err", err);  
      }
    });
    const parse = src => {  
      // 解析KEY=VAL的文件  
      const res = {};  
      src.split("\n").forEach(line => {    
        const keyValueArr = line.match(/^\s*([\w\.\-]+)\s*=\s*(.*)?\s*$/);    
        if (keyValueArr != null) {      
          const key = keyValueArr[1];      
          let value = keyValueArr[2] || "";      
          const len = value ? value.length : 0;      
          if (len > 0 && value.charAt(0) === '"' && value.charAt(len - 1) === '"') {
            value = value.replace(/\\n/gm, "\n");      
          }      
          value = value.replace(/(^['"]|['"]$)/g, "").trim();      
          res[key] = value;    
         }  
       });  
       return res;
    };<p style="line-height: 20px; color: #ccc">
    版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
    作者: 高尚的尚
    原文链接:<a href='https://juejin.im/post/6847902215684751374'>https://juejin.im/post/6847902215684751374</a>
    

回到顶部