vue.js - 在 vue.config.js 中添加 pug-plain-loader 配置

Question

我有一个通过 Vue CLI 创建的项目现在我想使用 Pug和我的Single File Components即 .vue文件。

为此，我开始关注 vue-loader documentation并安装pug和 pug-plain-loader使用命令 npm install -D pug pug-plain-loader .下一步建议在 webpack.config.js 中插入以下内容

// webpack.config.js -> module.rules
{
  test: /\.pug$/,
  loader: 'pug-plain-loader'
}

但是，使用 Vue CLI，我没有明确的 webpack 配置文件，而是 vue.config.js .

那么，如何添加这样的 pug-plain-loader vue.config.js 中的配置(最好使用 webpack-chain )？

我的当前 vue.config.js已经有一个 svg-loader如下:

module.exports = {
  // ...
  chainWebpack: (config) => {
    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
    svgRule
      .use('vue-svg-loader')
      .loader('vue-svg-loader')

    //TODO: add pug-plain-loader configuration here
  }
}

Answer 1

因此，以 here 为例，Vue CLI 有自己的方式在 webpack 中定义新规则。所以这段代码似乎是定义哈巴狗加载器的正确方法:

模块.exports = {
链Webpack:(配置)=> {
//哈巴狗装载机
配置模块
.rule('哈巴狗')
.test(/\.pug$/)
.use('pug-plain-loader')
.loader('pug-plain-loader')
。结尾();
},
};

这对我有用c:

(这仅适用于在模板标签中指定了 lang="pug"的 .vue 文件)