使用VUE CLI 3.x时如何向加载器添加新规则 [英] How can I add new rules to loaders while using VUE CLI 3.x

问题描述

最近几天，我尝试在Vue-router中引用HTML页面，但是无论我尝试了什么，我唯一得到的就是以下错误:

In the last couple of days I have tried to refer a HTML page inside Vue-router, but no matter what I have tried, the only thing I got back is the following error:

模块解析失败:意外令牌(1:0)您可能需要适当的加载程序来处理此文件类型，当前未配置任何加载程序来处理此文件.

Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

我已经尝试了许多不同的堆栈响应来解决它，但是其中大多数实际上都需要在 webpack.config.js 内添加一条额外的规则.

I have already attempt many different stack responses to fix it, but most of them actually requires to add an extra rule inside webpack.config.js.

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

但是，在最新版本的Vue CLI中，该文件似乎不再可用.

However in the latest version of Vue CLI, it looks like this file is not available anymore.

HTML页面位于 public/static 目录中，因此当我从 localhost:8080/static/home.html 访问该页面时，它运行正常我的目标是将其作为主页访问(仅使用 localhost:8080/).

The HTML page is placed in the public/static directory, so it is running fine when I access it from localhost:8080/static/home.html, but my goal is to access it as my home page (using localhost:8080/ only) .

到目前为止，我已经安装了 html-loader 和 vue-loader ，但没有成功的迹象.

So far I have already installed both html-loader and vue-loader and yet no sign of success.

P.S.我曾尝试将此HTML文件及其补充文件(css，字体和js)转换为组件，但我也没有成功.

P.S. I have tried to convert this HTML file and its complementary files (css, fonts and js) into a component, but I had no success as well.

推荐答案

Vue CLI 内部使用 webpack-chain 来维护Webpack配置，因此要对其进行配置，您需要添加

Vue CLI uses webpack-chain internally for maintaining the Webpack config, and so to configure it you need to add a vue.config.js file to your project (in place of this webpack.config.js).

要配置加载程序，您将需要以下内容(在 vue.config.js 内部)，当然还需要安装 html-loader 软件包:

And to configure the loaders you will need the following (inside the vue.config.js), of course with the html-loader package also installed:

module.exports = {

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

}

这篇关于使用VUE CLI 3.x时如何向加载器添加新规则的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！