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の教科書・無料プレゼント】

Junko
Laravelの使い方を覚えたい!と思ったら、ぜひ、役立ててほしいです。
ひつじプログラマ
会員制サイトをいちから作っていくよ。ボタンをクリックして詳細を見てね。
Laravelの教科書の詳細を見る

【無料プレゼント】

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

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

詳細はこちらをクリック
【LaravelでWebアプリ開発します】

「会員制サイトを作ってほしい」「開発の時間がないから頼みたい!」

こんなご要望承り中。オンラインミーティングでも、ご相談承ります。

サンプルやお見積もり目安を見てみる

Twitter始めました。
40代からプログラミング!

コメント

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