Vue：在.vue模板中未识别pug语言。

Question

根据 Vue 文档：

处理模板与其他技术略有不同，因为大多数 webpack 模板加载器（例如 pug-loader）返回模板函数而不是已编译的 HTML 字符串。我们可以安装原始的 pug 来代替使用 pug-loader。

TestComponent.vue:

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

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

main.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",
• "pug": "^2.0.3"

- Takeshi Tokugawa YD

---

安装pug-loader: https://github.com/pugjs/pug-loader - Brian Lee

根据文档，需要使用pug-plain-loader。 - Ohgodwhy

注意：您提供的文档链接适用于vue-loader v14，但您正在使用v15。 - Phil

Answer 1

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

您需要进行以下设置：https://www.npmjs.com/package/pug-loader 根据评论，您可能还需要：https://www.npmjs.com/package/pug-plain-loader

- Simon Hyll

---

@TakesiTokugawaYD 我也遇到了同样的问题，但是我已经安装了所有建议的加载器，并且它们各自的规则似乎都不能解决它。这个规则需要放在“options”下面的vue加载器测试中吗？ - PeterT

@PeterT，不行。请参考这个可用的配置（适用于webpack 4.X.X）。 - Takeshi Tokugawa YD

@TakesiTokugawaYD 啊，谢谢。我意识到我的问题在于我正在使用electron-webpack，并且webpack规则的自定义修改是按模块进行的，因此我只将pug规则应用于“main”webpack入口而不是“renderer”。 - PeterT

如果你正在使用vue-loader（通常与Vue和Webpack一起使用，请参阅文档），则需要使用pug-plain-loader而不是pug-loader。 - Cato Minor