Vue Deploy Automatic deployment

• Install the automatic deployment tool Ssh2-SFTP-client

     ` npm install ssh2-sftp-client`
  Copy the code

• Create a new file /deploy/index.js

const Client = require('ssh2-sftp-client');
const ora = require('ora');
const chalk = require('chalk');
const server = require('./products');
const spinner = ora('Posting to' + (process.env.NODE_ENV === 'prod' ? 'production' : 'test') + 'Server... ');
spinner.start();

const sftp = new Client()


sftp
    .connect({
        host: server.host,
        port: server.port,
        username: server.username,
        password: server.password
    })
    .then(() = > {
        console.log('----------------------------- connection successful, uploaded... -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- ')
        return sftp.uploadDir('dist/', server.path)
    })
    .then(data= > {
        console.log(data, '-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the upload is complete, timely and clear the cache -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --')
        console.log(chalk.green('Success! Successfully published to ' + (process.env.NODE_ENV === 'prod' ? 'production' : 'test') + 'Server! \n'));
    })
    .catch(err= > {
        console.log('----------------------------- TMD failed! Had an accident! Look what's going on! -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- ')
        console.log(chalk.red('Publishing failed.\n'));
        throw err;
    })
    .finally(() = > {
        spinner.stop();
        // Disconnect the connection
        sftp.end()
    })

Copy the code

• Create a new file /deploy/products.js

/* * Read the env environment variable */
const fs = require('fs');
const path = require('path');
// env specifies the server ID for the packaging environment
const envfile = process.env.NODE_ENV === 'prod' ? '.. /.env.prod' : '.. /.env.dev';
// env Specifies the path of the environment variable
const envPath = path.resolve(__dirname, envfile);
/ / env object
const envObj = parse(fs.readFileSync(envPath, 'utf8'));
const SERVER_ID = parseInt(envObj['VUE_APP_SERVER_ID']);

function parse(src) {
    // parse the file with KEY=VAL
    const res = {};
    src.split('\n').forEach(line= > {
        // matching "KEY' and 'VAL' in 'KEY=VAL'
        // eslint-disable-next-line no-useless-escape
        const keyValueArr = line.match(/^\s*([\w\.\-]+)\s*=\s*(.*)? \s*$/);
        // matched?
        if(keyValueArr ! =null) {
            const key = keyValueArr[1];
            let value = keyValueArr[2] | |' ';

            // expand newlines in quoted values
            const len = value ? value.length : 0;
            if (len > 0 && value.charAt(0) = = ='"' && value.charAt(len - 1) = = ='"') {
                value = value.replace(/\\n/gm.'\n');
            }

            // remove any surrounding quotes and extra spaces
            value = value.replace(/(^['"]|['"]$)/g.' ').trim(); res[key] = value; }});return res;
}

/* * Define multiple server accounts and export the current environment server account */ based on the SERVER_ID
const SERVER_LIST = [
    {
        id: 0.name: 'A- Formal environment '.domain: 'https://www.baidu.com'./ / domain name
        host: '111.11.111.11'.// ip
        port: 11./ / port
        username: 'userName'.// Account for logging in to the server
        password: 'psd'.// Account for logging in to the server
        path: 'D:\\Web\\h5\\bigscreen'// Publish the project path to the static server
    },
    {
        id: 1.name: 'A- Test Environment '.domain: 'https://www.baidu.com'./ / domain name
        host: '111.11.111.11'.// ip
        port: 11./ / port
        username: 'userName'.// Account for logging in to the server
        password: 'psd'.// Account for logging in to the server
        path: 'D:\\Web\\h5\\bigscreen'// Publish the project path to the static server}];module.exports = SERVER_LIST[SERVER_ID];

Copy the code

• Add it to the.env.prod file

    VUE_APP_SERVER_ID=0
Copy the code

• Add it to the.env.dev file

    VUE_APP_SERVER_ID=1
Copy the code

• In the package. Js

"scripts": {
    "serve": "vue-cli-service serve"."build": "vue-cli-service build"."lint": "vue-cli-service lint"."deploy:dev": "cross-env NODE_ENV=dev node ./deploy"."deploy:prod": "cross-env NODE_ENV=prod node ./deploy"
 },
Copy the code

• Enter on the console for different environments

    npm run deploy:dev
    or
    npm run deploy:prod
Copy the code