Vue: .vue 템플릿에서 pug 언어가 인식되지 않았습니다.

Vue: .vue 템플릿에서 pug 언어가 인식되지 않았습니다.

Vue 매뉴얼:

pug-loader 등의 대부분의 웹 팩템플릿 로더는 컴파일된HTML 문자열 대신 템플릿 함수를 반환하기 때문에 템플릿 처리 방법은 조금 다릅니다.퍼그 로더를 사용하는 대신 오리지널 퍼그를 설치하면 됩니다.

테스트 컴포넌트vue:

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

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

main.filename:

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-filename": "^15.2.4",
• "vue-filename" : "^2.5.16",
• "pug" : "^2.0.3"

Pug 언어 로더를 사용하도록 웹 팩을 설정해야 합니다. 그렇지 않으면 템플릿은 HTML로 해석되고 HTML로 템플릿에는 루트 태그(다른 모든 요소를 둘러싼 단일 HTML 요소)가 없습니다.

https://www.npmjs.com/package/pug-loader 를 설정할 필요가 있습니다.

코멘트에 의하면, https://www.npmjs.com/package/pug-plain-loader도 필요하게 될 가능성이 있습니다.

언급URL : https://stackoverflow.com/questions/51073702/vue-pug-language-has-not-been-recognized-in-vue-template