Question

处理模板略有不同，因为大多数Webpack 模板加载器（例如pug-loader）将返回模板函数编译的HTML字符串。除了使用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”

Answer 1

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

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

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

Vue：.vue模板中未识别哈巴狗语言

1 个答案: