Как добавить новые правила в загрузчики при использовании VUE CLI 3.x

Question

В последние пару дней я пытался ссылаться на HTML страницу внутри Vue -рутера, но что бы я ни пытался, единственное, что я получил, это следующая ошибка:

Ошибка разбора модуля: неожиданный токен (1: 0). Возможно, вам нужен соответствующий загрузчик для обработки этого типа файла, в настоящее время загрузчики не настроены для обработки этого файла.

Я уже пытался много разных ответов стека, чтобы исправить это, но большинство из них фактически требует добавления дополнительного правила внутри webpack.config.js.

{
  test: /\.(html)$/,
  use: {
    loader: "html-loader",
    options: {
      attrs: [":data-src"]
}

Однако в последней версии Vue CLI, похоже, что этот файл больше не доступно

Страница HTML находится в каталоге public/static, поэтому она работает нормально, когда я обращаюсь к ней с localhost:8080/static/home.html, но моя цель - получить к ней доступ как к своей домашней странице (используя localhost:8080/ только).

До сих пор я уже установил html-loader и vue-loader, но пока никаких признаков успеха.

PS Я пытался преобразовать этот HTML файл и его дополнительные файлы (css, шрифты и js) в компонент, но я также не добился успеха.

Answer 1

Vue CLI использует webpack-chain внутренне для поддержки конфигурации Webpack, поэтому для его настройки необходимо добавить файл vue.config.js в проект (на месте этого webpack.config.js).

А для настройки загрузчиков вам понадобится следующее (внутри vue.config.js), конечно же, с установленным пакетом html-loader:

module.exports = {

  chainWebpack: config => {
    config.module
      .rule('html')
      .test(/\.html$/)
      .use('html-loader')
      .loader('html-loader')
  }

}