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.json的scripts加入咱们须要执行的命令

   "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方法，进行分行读取内容并解析成key与value的键值对存入一个对象供使用;

   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;
   };复制代码