質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.97%

laravel5.5にて vue.jsを読み込もうとするとsyntaxエラーが出る

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,649

kazoogon

score 270

あるbladeファイルにて<script src="{{asset('js/app2.js')}}"></script>でjsファイルの読み込み。
![イメージ説明]
すると「Uncaught SyntaxError: Unexpected identifier」とのエラー。これは単純な文法ミスであるエラーなので文末に ; を入れてみるも変化なし。このimportしているだけの場所でsyntaxのエラーが出ているのがよくわかりません。。

ちなみにこちらがpublic/js/app2.jsです

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

require('../../resources/assets/js/bootstrap');

// window.Vue = require('vue');

Vue.component('example-component', require('../../resources/assets/js/components/ExampleComponent.vue'));

const app = new Vue({
    el: '#app',
    data: {
        msg:"this is ok"
    }
});

よろしくお願いいたします。

回答を受けての追加
(このように ; を追加いたしました、ちなみにCDNを使用すると成功します)

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

回答を受けての追加②
main.blade.php

@extends('layouts.navbar')

@section('content')

<div id="app2">
    <example-component></example-component>
</div>
<div id="test2">
    //CDNを使用しVueの練習をしただけのコードなので省略
</div>

<script>
    //Vueの実装(省略)
</script>
@endsection

layouts/navbar.blade.php

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <link rel="stylesheet" href="css/app.css">

    <title>Home</title>
</head>
<body>
<div id="app">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a href="" class="navbar-brand">KAZU</a>
        <ul class="navbar-nav">
            <li class="navbar-item"><router-link to="about_us" class="nav-link">O nas</router-link></li>
            <li class="navbar-item"><router-link to="blog" class="nav-link">blog</router-link></li>
            <li class="navbar-item"><router-link to="contact" class="nav-link">contakt</router-link></li>
            <li class="navbar-item"><router-link to="login" class="nav-link">log in</router-link></li>
        </ul>
    </nav>
    <router-view></router-view>
</div>

@yield('content')

<!-- Bootstrap用JavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

<script src="{{asset('js/app2.js')}}"></script>
<script>

    window.onload = function(){

        //テンプレートの設定
        const about_us = { template: '<div>わたしたち</div>' }
        const blog = { template: '<div>ブログです</div>' }
        const contact = { template: '<div>コンタクト!</div>' }
        const login = { template: '<div>ログイン</div>' }

        //ルートの設定
        const routes = [
            { path: '/about_us', component: about_us },
            { path: '/blog', component: blog },
            { path: '/contact', component: contact },
            { path: '/login', component: login }
        ]
        const router = new VueRouter({
            routes // routes: routes の短縮表記
        })
        const app = new Vue({
            router
        }).$mount('#app')

    }
</script>
</body>
</html>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kazoogon

    2018/04/05 16:52

    importの記述がないと単純にnew Vueの部分がundifinedになりますね。。 このサイトの方だとどこからvueをとってきているのかなぞです。。

    キャンセル

  • m.ts10806

    2018/04/05 17:01

    うーんなるほど。確かに最初のエラーは「末尾;」のつけ忘れで起きるものがほとんどですが、何でしょうね。

    キャンセル

  • kazoogon

    2018/04/05 17:43

    直接は関係なさそうですが、「Uncaught ReferenceError: require is not defined」のエラーも出ております。。https://stackoverflow.com/questions/19059580/client-on-node-uncaught-referenceerror-require-is-not-defined

    キャンセル

回答 1

checkベストアンサー

0

javascriptファイルを作成する場所が間違っていると思います。

Laravelのお作法では、
resources/assets/js/*.js ここにjavascriptファイルを配置します。

$ npm run dev

などのコマンドでLaravelMixを使ってビルドした結果、

public/js/*.js へ出力されます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/06 10:17

    「resources/assets/js/app.js」にVue.component('hoge', require('./components/layouts/hoge.vue'));と追加
    →npm run dev実行
     →「public/js/app.js」に__WEBPACK_IMPORTED_MODULE_0_vue___default.a.component('hoge', __webpack_require__(40));と追加されることを確認
     
     お陰様でvueが読み込まれる構造は理解しvueが読み込まれました。
     しかし未だにUncaught ReferenceError: VueRouter is not definedが出ます。
     ちなみに
     import VueRouter from 'vue-router';
    Vue.use(VueRouter);
    と記載し、使用時には
    const router = new VueRouter({
    routes
    })
    と記載しております。

    キャンセル

  • 2018/04/06 10:54

    「import Vue from 'vue';」 
    またこのコードをコメントアウトし、npm run devを実行してもvueは読み込まれました。
    これはpublic/js/app.js側で既にvueを読み込む処理が有る = 逆を言えばvue-routerを読み込むためには public/js/app.jsに何か直接記載しないといけないのか?? 
    すみません、まだここらへんの仕組みがいまいち理解できておりません

    キャンセル

  • 2018/04/06 13:05

    public/js/app.js, public/js/app2.js
    の両ファイルを読み込んでいるのであれば、app.jsでvueが読み込まれているのでエラーが出てないんだろうと思います。

    ひとまずこれ以降は別課題というか設計に寄ると思います。
    仕組み周りの説明をここでするのは私にはちょっと力不足です、すみません。

    まずは身近な人に聞いたり、質問者さんご自身で学習された方が良いと思います。
    調べた結果わからないところはteratailで質問されるのが良いと思います。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.97%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる