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

Question

我有一个通过 Vue CLI and now I want to use Pug with my Single File Components 创建的项目，即 .vue 文件。

为此，我开始遵循此 vue-loader documentation 并使用命令 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

根据示例here，Vue CLI 有自己的方式在 webpack 中定义新规则。所以这段代码似乎是定义 pug 加载器的正确方法：


    module.exports = {
      chainWebpack: (config) => {
        // Pug Loader
        config.module
          .rule('pug')
          .test(/\.pug$/)
          .use('pug-plain-loader')
          .loader('pug-plain-loader')
          .end();
      },
    };

这对我有用 c:

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

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

Adding pug-plain-loader configuration in vue.config.js

vue.js

webpack

pug

vue-cli-3

vue-loader