Uncaught TypeError: Vue is not a constructorの対処法
あるネットの教材でVue.jsの勉強をしていた所、このエラーが発生した。
構成としては、index.htmlからCDNでVue.jsを読み込んで使っています。
main.js
(function () {
"use strict";
var vm = new Vue({
el: "#app",
data: {
todos: [],
},
以下省略
.........
});
})();
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>My Vue App</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div id="app" class="container">
以下省略
.........
<script src="https://unpkg.com/vue"></script>
<script src="js/main.js"></script>
</body>
</html>
解決策
以下のようにVue.jsを古いバージョン指定で読み込んであげます。
<script src="https://unpkg.com/vue@2"></script>
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>My Vue App</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div id="app" class="container">
以下省略
.........
<script src="https://unpkg.com/vue@2"></script>
<script src="js/main.js"></script>
</body>
</html>