• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

component template 관련

22.01.18 14:46 작성 조회수 219

1

안녕하세요 

component에 template 항목으로 화면을 구성하는데  

vue.runtime.esm.js?2b0e:619 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

이런 오류가 발생했습니다. 

한 화면에 팝업창을 하나 띄우려고하는데 큰 기능이 없어서 단순 template으로만 구성하려고 했습니다. 

화면 자체 코드는 아래와 같습니다. 

<template>
<!-- 위쪽에는 일반적인 화면 구성 -->
<h4>환불 신청 및 처리 내역</h4>
        <div class="pay_history"> <!-- 중략 -->
        </div>

<!-- 팝업-->
    <popupStatus v-if="isModal" >
    </popupStatus>
<!-- 팝업-->
</template>
<scripte> 

var mHtml = ` <div class="pop_body">
            <table></table>
        </div>`

export default {
    name: 'RefundHistory',
    components : {
        'popupStatus' : {
             template : mHtml 
      } ,
    data() {
        return{
            isModal : true,
        }  
      },
    }
}
</script>

 

스택오버플로우를 살펴보니 config.js에서 runtimeCompiler: true  로 바꾸면 된다고 하는데요.. 

제가 사용하려던 템플릿이 non-precompiled Vue templates. 이라고 하는데요..  왜 이런 오류가 발생하는건가요??

컴포넌트의 템플릿을 procompile 시키는 방법이 따로 있는걸까요? (그게 뷰 config 를 수정하는 방식인건지?), 

컨피그 파일 수정 없이 procompile 된 템플릿을 사용하는 방법이 따로 있는지도 궁금합니다 .

 

 

답변 1

답변을 작성해보세요.

0

안녕하세요 다슬님, 뷰 프로젝트를 어떻게 생성하셨나요? 사용하신 Vue CLI 버전과 노드 버전 알려주시겠어요? :)

다슬님의 프로필

다슬

질문자

2022.01.25

안녕하세요 

사용한 버전은 아래와 같습니다 

 

  "vue": "^2.6.11",
 
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "^3.1.1",
"@vue/cli-plugin-router": "^4.5.9",
"@vue/cli-plugin-vuex": "^4.5.9",
"@vue/cli-service": "^4.5.13",

첨부해주신 코드 중간에 scripte 라는 오탈자가 있는데 요거 강의에서 안내드린 것처럼 `vue` 라고 치고 탭 누르셔서 싱글 파일 컴포넌트 자동완성으로 코드 작성하시면 오탈자가 발생하지 않을거예요 :)