Vue.js
vue分环境自动化部署前端项目__Vue.js
发布于 3 年前 作者 banyungong 1643 次浏览 来自 分享
粉丝福利 : 关注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;
};<p style="line-height: 20px; color: #ccc">
版权声明：著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
作者: 高尚的尚
原文链接：<a href='https://juejin.im/post/6847902215684751374'>https://juejin.im/post/6847902215684751374</a>

回到顶部