Uncaught ReferenceError: vue is not defined対策3選 試してみてください

LaravelとVue連携
スポンサーリンク

Vueを初めて使った時。「Uncaught ReferenceError: vue is not defined」が出てなぜか解決しない時に試してみてください。

わたしはこのミスに遭遇して、英語・日本語のサイトをググりまくりました^^;

そこで見つけた対策と、最終的にわたしがエラーをなおした対策を入れております。

同じように困った方の参考になればうれしいです。

スポンサーリンク

Uncaught ReferenceError: vue is not defined対策3選

① コードの位置を間違えている

CDNで読み込む場合には、位置に注意してください。

下記のコードが、Vueのコードの上部に来る必要があります。

なおネット上には htmlの<head></head>内にいれたらなおった、という例もありました。

② Javascriptのタイプ指定エラー

ファイル内でJavascriptのタイプを指定している場合は、正確に指定しましょう。

ダメな例

<script type=”JavaScript” src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js”>

良い例

<script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js”>

タイプは入れなくても良いのですが、もし入れる場合にはご注意を。

③ スペルミス、ケアレスミス

一番くやしくて、そして意外と見つけにくいのがこのパターン

ケアレスミスは、Googleのデベロッパーツールを利用すると見つけやすいです。

WindowsならF12キー、MacならCommand+Option+Iキーを押して起動。

そして【Sources】タブをクリック。

するとミスっているところに×マークが。

上記は、Vue を vue と小文字で入れているためにエラーになっています。

修正すると、下記のように表示されます。

【ブラウザ】

【コード】

わたしは、このケアレスミスでミスりました。
じゅんこ
じゅんこ

ケアレスミスって発見したときはうれしいと同時に、時間をむだにした気がして、少し悲しくもなりますね。

あなたのエラーが無事解決することを願っています!
LaravelとVue連携

【無料プレゼント】

「LaravelでWebアプリをいちから作れるようになりたい!」

そんなLaravel初心者のあなたへ【Laravelの教科書】基礎編プレゼント中!
会員制フォーラムサイトを学習しながら作れます。

詳細はこちらをクリック

【個別サポート実施中】

「本ブログに記載の方法を試してみたけれど、うまくいかない」「コードを見てほしい」という方のために、有償でメールサポートいたします。以下のボタンをクリックして相談フォームにアクセスして下さい。

詳しく見る

Twitter始めました。
スポンサーリンク
40代からプログラミング!

コメント

タイトルとURLをコピーしました