如何在使用 VUE CLI 3.x 时向加载器添加新规则

Question

在过去的几天里，我尝试在 Vue-router 中引用一个 HTML 页面，但无论我尝试了什么，我得到的唯一结果是以下错误：

模块解析失败：意外令牌 (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，但还没有成功的迹象。

附：我曾尝试将此 HTML 文件及其补充文件（css、字体和 js）转换为组件，但也没有成功。

Answer 1

Vue CLI uses webpack-chain internally 用于维护 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')
  }

}