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;
   };複製代碼