이번 글에서는 이클립스에서 Vue.js를 사용할 때 npm에 올라가 있는 최신 버전을 반영하기 위해 CDN을 설정하다가 발생한 caught TypeError: Vue is not a constructor 에러 해결 방법에 대해 글을 기록한다.
목차
1. 에러 발생
2. 에러 해결 방법
1. 에러 발생
아래의 코드에서 CDN을 사용하기 위한 src를 넣고, new Vue({})를 사용하여 객체를 생성하려고 했는데, 아래와 같이 caught TypeError: Vue is not a constructor 에러가 발생했다.
사용한 코드는 아래와 같다.
2. 에러 해결 방법
제일 먼저, vue 공식 홈페이지에서 CDN에 대한 설명 글을 봤다.
1) vue 공식 홈페이지에서 CDN 관련 URL
- https://ko.vuejs.org/guide/quick-start.html#using-vue-from-cdn
빠른 시작 | Vue.js
ko.vuejs.org
2) 글로벌 빌드를 사용하여 CDN을 사용하는 방법이 아래와 같이 나와 있었다. 이미 CDN의 경우에는 Vue2가 아닌 Vue3이 Default로 설정이 되어 있어 내가 작성한 코드는 Vue2 문법 코드라 Vue3 문법 코드를 사용하거나, CDN의 특정한 버전을 가져올 수 있도록 버전을 명시하면 된다.
3) Vue2를 사용하기 위해 script 태그 안에 src를 아래의 URL을 넣는다.
- URL : https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js
4) 전체 코드는 아래와 같다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<script>
window.onload = function(){
var test01View = new Vue({
el : '#test01',
data : {
msg : '어? 금지'
}
})
}
</script>
</head>
<body>
<div id="test01">
<h1>{{msg}}</h1>
</div>
</body>
</html>
5) 그러면 정상적으로 작동된다.
'IT > Vue.js' 카테고리의 다른 글
| [Vue.js] Vue.js 동작 순서 정리 (0) | 2023.10.18 |
|---|---|
| [Vue.js] 윈도우 10(Window 10) Vue.js 설치하기 (1) | 2023.10.16 |
| [Vue.js] 이클립스에서 Vue.js template 설정하는 방법 (0) | 2023.05.09 |
| [Vue.js] 이클립스에서 Vue.js CDN 설정하는 방법(HTML) (1) | 2023.04.25 |
| [Vue.js] 이클립스에서 Vue.js 개발 환경 세팅하는 방법 (0) | 2023.04.18 |
| [Vue.js] 윈도우 10(Windows 10)에서 Vue.js 설치하는 방법 (0) | 2023.04.18 |
| [Vue.js] Vue.js란? (0) | 2023.04.18 |
| Vue.js 프로젝트 시작하기(디렉토리 파악하기) (0) | 2021.08.01 |
최근댓글