如何在Vue CLI的vue.config.js中配置pug-plain-loader（webpack-chain方式）

No worries, let's get your Pug setup working smoothly in your Vue CLI project. Since Vue CLI uses webpack-chain for configuration under the hood, here's exactly how to update your existing vue.config.js to include the required pug-plain-loader setup:

Full Updated vue.config.js Code #

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

    // Add pug-plain-loader configuration
    // 1. Create a rule for standalone .pug files
    config.module
      .rule('pug')
      .test(/\.pug$/)
      .use('pug-plain-loader')
      .loader('pug-plain-loader')
      .end()

    // 2. Ensure Vue SFC templates with lang="pug" are processed correctly
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        // Extend vue-loader's compiler options to handle Pug syntax
        options.compilerOptions = {
          ...options.compilerOptions,
          // Optional: adjust whitespace behavior if needed for your templates
          preserveWhitespace: true,
          modules: {
            pug: require('pug-plain-loader')
          }
        }
        return options
      })
  }
}

What Each Part Does #

• Standalone .pug files: The first rule matches any standalone .pug files in your project and uses pug-plain-loader to compile them into valid HTML.
• Vue Single-File Components (SFCs): The second part tweaks the existing vue-loader configuration to recognize the lang="pug" attribute in your <template> tags. This ensures Vue can directly compile Pug syntax inside your .vue files without issues.

Test It Out #

Add a Pug template to one of your .vue files to verify everything works:

<template lang="pug">
  div.app-container
    h1 Welcome to Pug + Vue!
    p This template uses clean Pug syntax
    button(@click="greet") Say Hello
</template>

Run your project with npm run serve — if all goes well, the Pug template will compile without errors and render as expected in your app.

内容的提问来源于stack exchange，提问作者vahdet