Как настроить имена JS-файлов, создаваемых vue CLI?


Как настроить имена JS-файлов, создаваемых vue CLI?

05.10.2020 01:39:52 Просмотров 60 Источник

Я не могу найти документацию о том, как минимизировать активов и производства *.min.js файлы с помощью командной строки вю. Я использую vue cli версии 4.2.3.

Я требую, чтобы расширение было *.min.js для правильной работы роллбара.

Как бы вы настроили Vue cli для создания минимизированных активов? (без ТС).

У вопроса есть решение - Посмотреть?

Ответы - Как настроить имена JS-файлов, создаваемых vue CLI? / How to customise names of the JS files produced by Vue CLI?

Является ответом!
Michal Levý

05.10.2020 02:56:56

Я уверен, что Vue CLI минимизирует вывод JS при запуске build в производственном режиме. Это просто использование другого соглашения об именовании (нет "min.js")

Чтобы настроить имена файлов JS-фрагментов, создаваемых vue CLI, вы можете сделать следующее:

Проверьте конфигурацию Webpack по умолчанию, используемую vue CLI, запустив vue inspect в командной строке (Режим dev) или vue inspect --mode production (производственный режим)

Ищите output (должно быть ближе к началу вывода). В моем проекте это выглядит так:

Режим разработчика :

output: {
    path: '.....some dir\\dist',
    filename: 'js/[name].js',
    publicPath: '/',
    chunkFilename: 'js/[name].js'
  }, 

Режим производства:

output: {
    path: '.....some dir\\dist',
    filename: 'js/[name].[contenthash:8].js',
    publicPath: '/',
    chunkFilename: 'js/[name].[contenthash:8].js'
  }, 

Теперь вы можете настроить его - добавить vue.config.js к вашему проекту, если у вас его еще нет, добавьте следующее:

module.exports = {
    configureWebpack: config => {
      if(process.env.NODE_ENV === "production") {
        config.output.filename = 'js/[name].[contenthash:8].min.js'
        config.output.chunkFilename = 'js/[name].[contenthash:8].min.js'
      } else {
        config.output.filename = 'js/[name].js'
        config.output.chunkFilename = 'js/[name].js';
      }
    }
}

[name] и [contenthash:8] являются заполнителями Webpack - подробнее в документации

Помочь в развитии проекта:
Закрыть X