vue.js - Vue cli 3 在构建后做一些任务

Question

我正在使用 vue cli 3，这是我的 vue.config.js:

const path = require('path')
const webpack = require('webpack')
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$/)]
  }
}

我需要在生产构建后删除一些文件，我不知道如何检测构建过程是否结束。

我没有找到关于此的任何文档。

Answer 1

您可以在 package.json 文件中执行此操作。您可以添加自定义脚本或修改现有脚本。

例如看看 clean 脚本。您可以手动调用此脚本，或将其添加到另一个脚本中。在本例中，它在执行 build 脚本时执行:

  "scripts": {
    "serve": "vue-cli-service serve",
    "watch": "vue-cli-service build --mode development --watch",
    "dev": "vue-cli-service --mode development build",
    "build": "vue-cli-service build && npm run clean",
    "lint": "vue-cli-service lint",
    "clean": "rm -rf ../public/dist"
  },
  ...

注意:&& 使它们按顺序运行clean 将在build 之后运行.