快捷導(dǎo)航

Vue項(xiàng)目打包(build)時(shí),自動(dòng)打以時(shí)間命名的壓縮包方式

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

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

Vue-Cli 3.0+項(xiàng)目配置build壓縮包

Vue-Cli 3.0+創(chuàng)建的Vue項(xiàng)目所有的配置都在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，則只復(fù)制中間的插件配置項(xiàng)即可。

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ù)平臺(tái)'
                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ī)則的，可能會(huì)無(wú)法打包，我使用的是"filemanager-webpack-plugin": "^7.0.0-beta.0"，有漏洞，這種時(shí)間格式無(wú)法打包

Vue-Cli 2.0 項(xiàng)目配置build壓縮包

Vue-Cli 2.0的項(xiàng)目配置方式與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的版本不一樣，這里的配置項(xiàng)中，相對(duì)于前面**Vue-Cli 3.0+**中少了 events: {}。如果還按照前面的配置，則不會(huì)生成壓縮包。