使用 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但还没有成功的迹象。

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')
  }

}