typescript - 外部 Pug 模板 - 模板语法错误 组件模板需要根元素，而不仅仅是文本

Question

我一直在努力让 Pug 模板与基于 Vue 类的组件一起使用，并将 pug 模板作为单独的文件。根据添加这应该只是工作的文档：

// 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']
    }
  ]
}

但事实并非如此。我得到错误

(Emitted value instead of an instance of Error) template syntax error Component template requires a root element, rather than just text.

这是我的组件“HelloWorld.ts”：

import { Component, Prop, Vue } from 'vue-property-decorator'
//import WithRender from '!vue-template-loader!pug-plain-loader!./hello-world.pug' <-- This works fine
import WithRender from './hello-world.pug'

@WithRender
@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string
}

无论我尝试与加载程序配置进行何种组合，都无法使其工作。我还尝试将加载器移动到 vue.config.js 的 chainWebpack 部分，但只是给出相同的错误。

奇怪的是，如果我使用以下 loader 短格式导入它，它可以正常工作：

import WithRender from '!vue-template-loader!pug-plain-loader!./hello-world.pug'

谁能告诉我哪里可能出错了？它快把我逼疯了。

Answer 1

在 Vue 的检查器的帮助下对其进行了排序：

vue inspect module.rules > rules-output.js

我必须将它添加到我的 vue.config.js 的 chainWebpack 部分：

chainWebpack: webpackConfig => {
  webpackConfig.module
    .rule('pug')
      .oneOf('pug-template')
        .uses
          .delete('raw')
          .delete('pug-plain-loader')
          .end()
        .use('vue-template-loader')
          .loader('vue-template-loader')
          .end()
        .use('pug-plain-loader')
          .loader('pug-plain-loader')
          .end()
  },