在vue.config.js中添加Pug-Plain-Loader配置

Question

我有一个通过vue CLI创建的项目，现在我想将pug与我的单个文件组件(即.vue文件(一起使用。

为此，我开始遵循此VUE-LOADER文档，并使用命令npm install -D pug pug-plain-loader安装了pug和pug-plain-loader。下一步建议将以下内容插入webpack.config.js

中

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

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

那么，如何在vue.config.js中添加这样的pug-plain-loader配置(最好使用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

在此处的示例中，Vue Cli具有自己的方法来定义WebPack中的新规则。因此，此代码似乎是定义PUG加载程序的正确方法(在您的vue.config.js文件中 - 如果不存在，创建它(：

   Module.exports = {      Chainwebpack ：( config(=> {       //哈哈装载机        config.module          .rule('pug'(          .test(/。pug $/(          .use('Pug-plain-Loader'(          .loader('Pug-plain-Loader'(          。结尾((;      }，，    };

这对我有用c：

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