Vue Cli 3 отключение разделения кода - не удается избавиться от хеш-файла - PullRequest
Новая
       62

Vue Cli 3 отключение разделения кода - не удается избавиться от хеш-файла

1 голос
/ 14 октября 2019

У меня есть установка vue.config.js, которая прекрасно работает и отменяет расщепление кода по умолчанию.

Но все равно выводится файл CSS с хешем, идентичным файлу CSS с красивым именем. Я могу написать скрипт для его удаления, но мне интересно, есть ли способ настроить файл так, чтобы он не выводил CSS-файл с хешем.

vue.config.js: 

const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  outputDir: "../assets/",
  configureWebpack: {
    plugins: [
      new MiniCssExtractPlugin({
        filename: "/css/sales-report.css"
      })
    ],
    output: {
      filename: "./js/sales-report.js"
    }
  },
  chainWebpack: config => {
    config.optimization.delete("splitChunks");
  }
};

Вывод командной строки выглядит следующим образом: screenshot

Я хотел бы вывести только ../assets/js/sales-report.js и ../assets/css/sales-report.css, но не нашелправильная настройка для отмены вывода ../assets/css/app.fd4aa059.css.

Если вы хотите проверить, эта конфигурация будет работать с любым проектом Vue CLI 3. Какие настройки мне не хватает, чтобы отменить этот файл?

1 Ответ

1 голос
/ 14 октября 2019

В проектах Vue CLI уже используется mini-css-extract-plugin, поэтому добавление нового в configureWebpack приведет к дублирующей обработке CSS, как вы обнаружили.

Вместо этого вы можете настроить существующий плагин с помощью css.extract в vue.config.js. Это должно выглядеть примерно так: 

// vue.config.js
module.exports = {
  //...
  configureWebpack: {
    output: {
      filename: "./js/sales-report.js"
    }
  },
  chainWebpack: config => {
    config.optimization.delete("splitChunks");
  },
  css: {
    extract: {
      filename: "/css/sales-report.css"
    }
  }
}
...