vue项目build自动生成dist.zip压缩文件

2,742 阅读1分钟

背景:

想用vue3+vite2搭建项目,发现对node.js有要求。Vite 需要 Node.js 版本 >= 12.0.0。 但是公司前端项目均是用jenkins自动化部署,在jenkins中拉包再编译的。而这时发现jenkins上的nodejs版本过低,尝试过安装新版本nodejs没有成功,原因找了很久,原因是服务器操作系统太低,nodejs的依赖问题造成的。考虑到影响面,不可能重新装服务器的。所以才想到前端编译好代码再拉到服务器上。

  1. 安装rimraf,相当于UNIX 命令 rm -rf。 npm install rimraf --save-dev

  2. 安装压缩文件夹插件filemanager-webpack-pluginnpm install filemanager-webpack-plugin --save-dev

  3. 配置vue.config.js:(这里请忽略“speed-measure-webpack-plugin”打包速度分析插件)

const isdev = process.env.VUE_APP_NODE_ENV !== 'production';
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin'); // 打包速度分析插件
const smp = new SpeedMeasurePlugin();
const FileManagerPlugin = require('filemanager-webpack-plugin'); // 压缩文件夹
... ...
module.exports = {
... ...
configureWebpack: smp.wrap({
    plugins: [
        ... ...
      !isdev && new FileManagerPlugin({
        events: {
          onEnd: {
            // delete: [ './dist.zip'],
            archive: [{ source: './dist', destination: './dist.zip' }]
          }
        }
      })
    ]
})
  1. 配置package.json编译环境命令:(编译并压缩后再删除dist文件夹)
"scripts": {
    ... ...
    "build": "vue-cli-service build",
    "build:zip": "vue-cli-service build && rimraf dist",
  },

执行npm run build就能看到根目录下的dist.zip压缩包了,如果要删除dist文件夹则执行npm run build:zip