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

Posted 2023-02-22

【中文标题】在 vue.config.js 中添加 pug-plain-loader 配置

【英文标题】：Adding pug-plain-loader configuration in vue.config.js

【发布时间】：2019-11-10 17:24:39

【问题描述】：

我有一个通过Vue CLI 创建的项目，现在我想将Pug 与我的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
  

【参考方案1】：

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

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

这对我有用 c:

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

【讨论】：

完美运行 ? 将它放入 vue.config.js 并运行 npm i -D pug pug-plain-loader 一切正常，只需使用