Как исключить папку из build сборки проекта на Vue

Возникла задача при сборке production версии проекта не копировать в неё папку со статичными json файлами, которая используется только для отладки и подмены ряда ссылок в api при работе с локальным сервером.

Vue-cli позволяет внутри своей конфигурации изменять конфигурацию сборки webpack. Вопрос был решен следующим образом:

Как узнать конфигурацию webpack проекта на Vue.js

Для начала нужно узнать текущую конфигурацию, чтобы найти что отключить. Сделать это можно с помощью следующей команды, запущенной в папке проекта:

vue inspect > output.js

Для удобства работы с конфигурацией сразу её записываем в файл output.js, который потом удалим. Эта команда показывает конфигурацию для development сборки проекта, чтобы вывести production сборку добавляем к ней флаг:

vue inspect > output.js --mode production

Теперь в файле output.js будет находиться полная конфигурация webpack для обработки проекта на vue.

Поиском по названию папки public находим в конфигурации часть:

    /* config.plugin('copy') */    new CopyWebpackPlugin(
      [
        {
          from: '/Users/romanspiridonov/www/projectName/public',
          to: '/Users/romanspiridonov/www/projectName/dist',
          toType: 'dir',
          ignore: [
            '.DS_Store'
          ]
        }
      ]
    ),

Видим, что это CopyWebpackPlugin, у которого есть параметр ignore. Теперь идём в vue.config.js, чтобы добавить нужную конфигурацию для этого плагина.

Не копируем папку в процессе сборки

Vue-cli позволяет выполнять продвинутую настройку webpack c помощью метода chainWebpack. Внутри него обернём изменение конфигурации в проверку NODE_ENV на соответствие production окружению, чтобы папка игнорировалась только в production сборке.

Добавляем следующий код:

  chainWebpack: config => {
    // Ignore static api json files for production & test build
    if (process.env.NODE_ENV == 'production') {
      config.plugin('copy').tap(options => {
        options[0][0].ignore.push('json/**/*')
        return options
      })
    }
  },

Тестируем получившуюся конфигурацию с помощью:

vue inspect > output.js --mode production

И видим желаемые изменения:

    /* config.plugin('copy') */    new CopyWebpackPlugin(
      [
        {
          from: '/Users/romanspiridonov/www/dive-client/public',
          to: '/Users/romanspiridonov/www/dive-client/dist',
          toType: 'dir',
          ignore: [
            '.DS_Store',
            'json/**/*'
          ]
        }
      ]
    ),

При тестировании через npm run build убеждаемся, что действительно ни один из файлов внутри папки public/json не попадает внутрь сборки.