Vue：.vue 模板中无法识别 pug 语言

Question

来自 Vue documentation：

处理模板有点不同，因为大多数 webpack 模板加载器（例如 pug-loader）返回模板函数 一个已编译的 HTML 字符串。而不是使用 pug-loader，我们可以 安装原版哈巴狗。

TestComponent.vue：

<template lang="pug">
  div
    h2 {{ message }}
</template>

<script>
  export default {
    data () {
      return {
        message: 'Done!!! Done...'
      }
    }
  }
</script>

ma​​in.js：

import Vue from 'vue'
import TestComponent from './../components/TestComponent/TestComponent.vue'

new Vue({
  el: '#app',
  render: h => h(TestComponent)
});

错误：

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

  div
    h2 {{ message }}

  - Component template requires a root element, rather than just text.

使用的依赖版本：

• “webpack”：“^4.7.0”
• “vue”：“^2.5.16”
• “vue-loader”：“^15.2.4”，
• "vue-template-compiler": "^2.5.16",
• “哈巴狗”：“^2.0.3”

Answer 1

您需要设置 Webpack 以使用 Pug 语言加载器，否则您的模板将被解析为 HTML，并且您的模板确实为 HTML 没有根标记（围绕所有其他元素的单个 html 元素）。

您需要进行设置：https://www.npmjs.com/package/pug-loader

根据您可能还需要的评论：https://www.npmjs.com/package/pug-plain-loader