Vue項目打包(build)時,自動打以時間命名的壓縮包方式

更新時間：2022年10月14日 09:58:26 作者：GIS開發(fā)者

這篇文章主要介紹了Vue項目打包(build)時,自動打以時間命名的壓縮包方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

Vue-Cli 3.0+項目配置build壓縮包

Vue-Cli 3.0+創(chuàng)建的Vue項目所有的配置都在vue.config.js文件中，

1.安裝依賴

cnpm install filemanager-webpack-plugin moment  --save-dev

2.配置插件使用

在vue.config.js中引入依賴，并配置文件名規(guī)則

const FileManagerPlugin = require('filemanager-webpack-plugin')
let  moment = require('moment')
const NAME=moment().format('YYYYMMDDHH')

在module.exports下添加

configureWebpack: {
        plugins: [
            new FileManagerPlugin({
                events: {
                    onEnd: {
                        delete: ['./dist/*.zip'],
                        archive: [
                            {source: './dist', destination: `./dist/${NAME}.zip`},
                        ]
                    }
                }
            })
        ]
    }

如果已有，configureWebpack.plugins，則只復制中間的插件配置項即可。

3.完整示例

const FileManagerPlugin = require('filemanager-webpack-plugin')
let  moment = require('moment')
const NAME=moment().format('YYYYMMDDHH')
module.exports = {
    lintOnSave: true,
    publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
    chainWebpack: config => {
        config
            .plugin('html')
            .tap(args => {
                args[0].title = '****農(nóng)業(yè)大數(shù)據(jù)平臺'
                return args
            })
    },
    configureWebpack: {
        plugins: [
            new FileManagerPlugin({
                events: {
                    onEnd: {
                        delete: ['./dist/*.zip'],
                        archive: [
                            {source: './dist', destination: `./dist/${NAME}.zip`},
                        ]
                    }
                }
            })
        ]
    }
}

4.執(zhí)行npm run build打包命令，就有提示了，可以查看dist文件夾下有壓縮包了

注意：YYYY-MM-DD 這種命名規(guī)則的，可能會無法打包，我使用的是"filemanager-webpack-plugin": "^7.0.0-beta.0"，有漏洞，這種時間格式無法打包

Vue-Cli 2.0 項目配置build壓縮包

Vue-Cli 2.0的項目配置方式與Vue-Cli 3.0+配置方式不同，主要是只能使用filemanager-webpack-plugin3.0以下的版本

1.依賴安裝

cnpm install filemanager-webpack-plugin@^2.0.5  --save-dev
cnpm install moment  --save-dev

2.在webpack.prod.conf.js文件頂部引入依賴

const FileManagerPlugin = require('filemanager-webpack-plugin')
let  moment = require('moment')
const NAME=moment().format('YYYYMMDDHH')

3.在webpack.prod.conf.js文件底部的module.exports = webpackConfig之前，添加如下代碼：

webpackConfig.plugins.push(
  new FileManagerPlugin({
      onEnd: {
        delete: ['./dist/*.zip'],
        archive: [
          {source: './dist', destination: `./dist/${NAME}.zip`},
        ]
      }
  })
)

注意，這里由于FileManagerPlugin的版本不一樣，這里的配置項中，相對于前面**Vue-Cli 3.0+**中少了 events: {}。如果還按照前面的配置，則不會生成壓縮包。