Vue CLI 3生产构建完成后执行文件删除任务的实现方法

嘿，我来给你几个实用的方案，完美适配你的Vue CLI 3配置，实现生产构建完成后自动删除指定文件：

方案一：利用Webpack的done钩子（推荐） #

Webpack提供了done钩子，会在整个构建流程完全结束后触发，这时候所有产物都已经生成，是执行删除操作的最佳时机。你可以直接在vue.config.js的configureWebpack里添加一个自定义插件：

const path = require('path')
const webpack = require('webpack')
const fs = require('fs') // 引入文件系统模块
const publicDir = 'public'
const isProduction = process.env.NODE_ENV === 'production'

module.exports = {
  // 你的原有配置...
  publicPath: isProduction ? './dist/' : '',
  outputDir: 'public/dist',
  indexPath: '../../resources/views/index.blade.php',
  filenameHashing: true,
  chainWebpack: config => {
    config
      .entry('app')
      .clear()
      .add('./resources/vue/main.js')
      .end()
    config.module
      .rule('graphql')
      .test(/\.gql$/)
      .use('graphql-tag/loader')
      .loader('graphql-tag/loader')
      .end()
  },
  configureWebpack: {
    plugins: [
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
      // 新增自定义删除插件
      {
        apply: (compiler) => {
          compiler.hooks.done.tap('DeleteAfterBuildPlugin', () => {
            // 只在生产环境执行删除操作
            if (!isProduction) return
            
            // 定义要删除的文件路径，根据你的需求修改
            const filesToDelete = [
              path.resolve(__dirname, 'public/dist/some-unwanted-file.js'),
              path.resolve(__dirname, 'public/dist/extra-file.css')
            ]
            
            filesToDelete.forEach(filePath => {
              if (fs.existsSync(filePath)) {
                fs.unlinkSync(filePath)
                console.log(`✅ 已删除文件: ${filePath}`)
              } else {
                console.log(`⚠️ 文件不存在: ${filePath}`)
              }
            })
          })
        }
      }
    ]
  }
}

注意：如果需要删除匹配通配符的文件（比如所有.map文件），fs.unlinkSync不支持通配符，你可以先安装glob模块（npm install glob --save-dev），然后用它来匹配文件：

const glob = require('glob')

// 在done钩子里面替换成：
const filesToDelete = glob.sync(path.resolve(__dirname, 'public/dist/*.map'))
filesToDelete.forEach(filePath => {
  fs.unlinkSync(filePath)
  console.log(`✅ 已删除sourcemap文件: ${filePath}`)
})

方案二：使用npm的post脚本（最简单） #

npm支持自动执行post前缀的脚本，只要你的package.json里有build命令，就能在它执行成功后自动运行postbuild脚本：

1. 首先安装跨平台删除工具rimraf（避免Windows和Unix系统命令差异）：

npm install rimraf --save-dev

2. 修改package.json的scripts：

{
  "scripts": {
    "build": "vue-cli-service build",
    "postbuild": "rimraf public/dist/*.map public/dist/unwanted-file.js"
  }
}

这样每次执行npm run build完成后，就会自动执行postbuild里的删除命令，非常省心。

方案三：通过chainWebpack配置钩子 #

如果你习惯用chainWebpack来配置Webpack，也可以用链式API添加这个钩子：

chainWebpack: config => {
  // 你的原有chainWebpack配置...
  
  // 添加自定义删除插件
  config.plugin('delete-after-build').use({
    apply: (compiler) => {
      compiler.hooks.done.tap('DeleteAfterBuild', () => {
        if (!isProduction) return
        // 这里写删除逻辑，和方案一一致
      })
    }
  })
}

这几个方案都能准确检测到构建进程结束，你可以根据自己的习惯选择最合适的方式~

内容的提问来源于stack exchange，提问作者talkhabi