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

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

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

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

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

vue inspect > output.js

1	vue inspect > output.js

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

vue inspect > output.js --mode production

1	vue inspect > output.js --mode production

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

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

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

/* 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 &amp; test build
    if (process.env.NODE_ENV == 'production') {
      config.plugin('copy').tap(options => {
        options&#91;0]&#91;0].ignore.push('json/**/*')
        return options
      })
    }
  },

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

1	vue inspect > output.js --mode production

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

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

/* 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 не попадает внутрь сборки.

624