Background:

Want to build a project with vue3+vite2, found node.js requirements. Vite requires node.js version >= 12.0.0. However, the front-end projects of the company are automatically deployed by Jenkins and recompiled by pulling packages in Jenkins. At that time, I found that the nodeJS version on Jenkins was too low, and I tried to install the new version nodeJS without success. The reason was that the server operating system was too low and nodeJS was dependent. Reinstalling the server is not possible given the impact surface. That’s why I came up with the idea of compiling the code on the front end and pulling it to the server.

  1. Install rimraf, equivalent to the UNIX command rm -rf.

npm install rimraf --save-dev

  1. Install the zip folder plugin filemanager-webpack-plugin.

npm install filemanager-webpack-plugin --save-dev

  1. Configure the vue. Config. Js: (Ignore speed-measure-webpack-plugin to package the speed analysis plug-in)
constisdev = process.env.VUE_APP_NODE_ENV ! = ='production';
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin'); // Package the speed analysis plug-in
const smp = new SpeedMeasurePlugin();
const FileManagerPlugin = require('filemanager-webpack-plugin'); // Compress the folder. .module.exports = { ... .configureWebpack: smp.wrap({
    plugins: [
        ... ...
      !isdev && new FileManagerPlugin({
        events: {
          onEnd: {
            // delete: [ './dist.zip'],
            archive: [{ source: './dist'.destination: './dist.zip'}]}})]})Copy the code
  1. Configure package.json build environment command :(compile and compress before deleting dist folder)
"scripts": {... ."build": "vue-cli-service build"."build:zip": "vue-cli-service build && rimraf dist",},Copy the code

To see the dist. Zip zip in the root directory, execute NPM run build:zip to remove the dist folder