preface

Hello, everyone! Today we are going to talk about how vUE project is deployed automatically by environment. When it comes to automatic deployment, some friends may think of it
jenkins, this is also a solution my company is currently using, but considering deployment
jenkinsWe need to set up a Java environment, which is not friendly enough for some of our team members. This article introduces how to use the SCP2 plug-in to complete automatic deployment

The body of the

  1. Since it is to understandvueThe automatic deployment of the project, the first need to build a localvueThe project (via scaffolding 3.x and 4.x versions are both available) is then usednpmDownload the main character of this articlescp2Plug-in, environment construction and plug-in download will not be described;
  2. mentionedvueSub-environment, as you probably know, needs to be created in the project root directory.env.xxxFormat file, assuming we need to deploy onestageEnvironment, we can create one in the project root directory.env.stageFile, as follows:

    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"Copy the code
    Among themVUE_APP_DIST = "dist-stage"Use custom package folder names to distinguish between different environment packages during deploymentvue.config.jsConfiguring environment VariablesoutputDir: process.env.VUE_APP_DIST || "dist"

  3. Create in the project root directorydeployFolder, indeployNew folderbuild.jsFile to write to our deployment script;

  4. inpackage.jsonthescriptsAdd the commands we need to execute

    "deploy:stage": "node deploy/build.js stage" Copy the code

    Among themstageAre the environmental parameters we need to carry (can also passNODE_ENV=XXXTo specify, so that you can get environment variables directly)nodeAdditional parameters carried by the command can passprocess.argvSo that we can differentiate the environment that currently needs to be packaged

    const args = process.argv.splice(2);
const env = args[0];
const fs = require("fs");
const path = require("path");
// env Determines the path specified by the packaging environment
const envfile = `.. /.env.${env}`;
// env Specifies the path of the environment variable
const envPath = path.resolve(__dirname, envfile);Copy the code

    We have obtained the current deployment environment and the location of the configuration file of the corresponding environment. Next, we need to read the configuration file informationparseMethod to read the contents of the branch and parse intokeywithvalueStore a key-value pair of the

    const parse = src= > {  
  // parse the file with 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;
};Copy the code

  5. Now that we can differentiate environments and get server parameters for different environments, executescp2The complete content of the deployment command is as follows:

    const client = require("scp2");
const args = process.argv.splice(2);
const env = args[0];const fs = require("fs");
const path = require("path");
// env Determines the path specified by the packaging environment
const envfile = `.. /.env.${env}`;
// env Specifies the path of the environment variable
const envPath = path.resolve(__dirname, envfile);
// env object const
envObj = parse(fs.readFileSync(envPath, "utf8"));
// Get the server configuration
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('uploaded to${env}Environment, scp2 tool upload completed ');  
  } else {    
    console.log("err", err); }});const parse = src= > {  
  // parse the file with 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;
};Copy the code