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

Posted 2023-02-22

【中文标题】如何在使用 VUE CLI 3.x 时向加载器添加新规则

【英文标题】：How can I add new rules to loaders while using VUE CLI 3.x

【发布时间】：2020-05-14 12:57:05

【问题描述】：

在过去的几天里，我尝试在 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）转换为组件，但也没有成功。

【问题讨论】：

你可以试试test: /\.html$/ 吗？

【参考方案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')
  

【讨论】：

您好，html-loader 默认工作，无需任何配置。但是添加您的 sn-p 会导致错误，“未找到这些相关模块：”（并显示来自 html 的一些内容，例如 .css 文件）。我正在尝试通过添加 .tap(options => // modify the options... return minimize: false )

来关闭生产的最小化

更改选项：cli.vuejs.org/guide/webpack.html#modifying-options-of-a-plugin