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>