如何设置 Webpack 以便能够在单文件组件（.vue）和“vue-class-component”类中使用 Pug？

Posted 2023-02-22

【中文标题】如何设置 Webpack 以便能够在单文件组件（.vue）和“vue-class-component”类中使用 Pug？

【英文标题】：How to setup Webpack so that will be able to use Pug in both Single File Components (.vue) and "vue-class-component" classes?

【发布时间】：2019-08-04 19:50:22

【问题描述】：

根据 Vue.js documentatin 在单文件组件中使用 pug 预处理器，需要 pug-plain-loader（不是 pug-loader）：

  test: /\.pug$/,
  loader: 'pug-plain-loader'

如果除了单个文件组件（.vue 文件）我还需要将 pug 模板导入 TypeScript 类，由vue-property-decorator 包提供（基于vue-class-component）？

我必须看到 example 仅用于 html 模板加载：

@Component(
  template: require('./MyComponent.html')
)
export default class MyComponent extends Vue 
    //...

如果需要改用 pug 怎么办？

@Component(
  template: require('./RegularButton.pug')
)
export default class RegularButton extends Vue 
    //...

在这种情况下，不应使用 pug-plain-loader：

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> <button @click="onClickEventHandler"> lettering </button>
 @ ../ReusableComponents/RegularButton/RegularButton.ts 18:18-48
 @ ./SPA_Test.ts

我知道首先我需要安装 pug-loader。但是我需要如何使我的 webpack 配置与 pug-plain-loader 设置相协调呢？

// ...
module: 
  rules: [
    
      test: /\.ts?$/,
      loader: 'ts-loader',
      options: 
        appendTsSuffixTo: [/\.vue$/]
      
    ,
    
      test: /\.json5$/,
      loader: 'json5-loader'
    ,
    
      test: /\.(yml|yaml)$/,
      use: ['json-loader', 'yaml-loader']
    ,
    
      test: /\.vue$/,
      loader: 'vue-loader'
    ,
    
      test: /\.pug$/,
      loader: 'pug-plain-loader'
    
  ]

---

更新：第一次解决后的错误输出

NonErrorEmittedError: (Emitted value instead of an instance of Error) 

  Errors compiling template:

  text "export default "" outside root element will be ignored.

  1  |  export default "<div class=\"container\"><h1> pageTitle </h1><hr><div><div>V-Model Test：</div><div> vModelTestProperty </div><div><input type=\"text\" v-model=\"vModelTestProperty\"></div></div><hr><div><div> defaultTextLabel </div><div><RegularButton :lettering=\"&quot;Non default button text&quot;\" :onClickEventHandler=\"executeTest\"></RegularButton></div></div></div>"
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    at Object.emitError (C:\Users\i\Documents\phpStorm\InHouseDevelopment\mylib\node_modules\webpack\lib\NormalModule.js:165:14)
    at Object.module.exports (C:\Users\i\Documents\PhpStorm\InHouseDevelopment\mylib\node_modules\vue-loader\lib\loaders\templateLoader.js:61:21)
 @ ./SPA_Test.vue?vue&type=template&id=cabf1cca&lang=pug& 1:0-422 1:0-422
 @ ./SPA_Test.vue
 @ ./SPA_Test.ts

组件：

<template lang="pug">
  .container

    h1  pageTitle 
    hr

    div
      div V-Model Test：
      div  vModelTestProperty 
      div: input(type='text' v-model='vModelTestProperty')
    hr

    div
      div  defaultTextLabel 
      div: RegularButton(:lettering='"Non default button text"' :onClickEventHandler='executeTest')
</template>


<script lang="ts">

  import  Vue, Component, Prop  from 'vue-property-decorator'

  @Component
  export default class SPA_Test extends Vue 

    private pageTitle: string = 'SPA related test';
    private vModelTestProperty: string = 'Inputted characters will be displayed here';
    private defaultTextLabel: string = 'Default text';

    public executeTest(): void 
      console.log('Test O\'K');
    
  
</script>

我不认为@Hammerbot 的解决方案是错误的；也许它是正确解决方案的一部分。无论如何，有设置

  test: /\.vue$/,
  loader: 'vue-loader'
,

  test: /\.pug$/,
  loader: 'pug-plain-loader'

一切正常，除非 .pug 无法在 @Component 装饰器中导入：

import  Vue, Component, Prop  from 'vue-property-decorator';

@Component(
  //template: require('./RegularButton.pug') // error will occur
  template: '<button @click="onClickEventHandler"> lettering </button>'
)
export default class RegularButton extends Vue 

  @Prop(default: 'Default text', type: String) private readonly lettering!: string;
  @Prop(default: (): void => , type: Function) private readonly onClickEventHandler!: () => ;

【参考方案1】：

根据Vue.js官方documentation，要使用vue-loader和pug-plain-loader，需要配置loader rule如下：

如果您还打算使用它在 javascript 中将 .pug 文件作为 HTML 字符串导入，则需要在预处理加载器之后链接 raw-loader。但是请注意，添加 raw-loader 会破坏 Vue 组件中的使用，因此您需要有两条规则，其中一条使用 resourceQuery 定位 Vue 文件，另一条（后备）定位 JavaScript 导入：

// webpack.config.js -> module.rules

  test: /\.pug$/,
  oneOf: [
    // this applies to `<template lang="pug">` in Vue components
    
      resourceQuery: /^\?vue/,
      use: ['pug-plain-loader']
    ,
    // this applies to pug imports inside JavaScript
    
      use: ['raw-loader', 'pug-plain-loader']
    
  ]

【讨论】：

感谢您的解决方案。不幸的是，它对我不起作用。请检查答案区域中的更新。

@GurebuBokofu 你可能想看看这个：vue-loader.vuejs.org/guide/pre-processors.html#pug。 vuejs 官方文档说的和 pug-plain-loader 的文档略有不同。

【参考方案2】：

有效的解决方案是：

    test: /\.pug$/,
    oneOf: [
        resourceQuery: /^\?vue/,
        use: ["pug-plain-loader"]
    , 
        use: [
            "html-loader",
            "pug-html-loader"
        ]
    ]