在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中定义新规则。因此，这段代码似乎是定义pug loader的正确方法：

module.exports = {chainWebpack：（配置）=> {//帕格装载机配置模块.rule（'pug'）.test（/ \。pug $ /）.use（'pug-plain-loader'）.loader（'pug-plain-loader'）。结束（）;}，};

这对我有用c：

（（仅适用于在模板标记中指定了lang =“ pug”的.vue文件中）