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

ある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>

m.ts10806

2018/04/05 04:26

念のため、「文末に ; を入れてみるも変化なし」のソースも追記してください。

m.ts10806

2018/04/05 04:47

ちなみにVue、VueRouter については間違いなく読み込まれているんですよね？

kazoogon

2018/04/05 05:44

回答ありがとうございます。　package.json確認しましたところ、vueもvueRouterもありましたので、読み込まれていると思います。(ここの認識が違っていたら申し訳ないです)。また質問も編集致しました、よろしくお願いいたします。

m.ts10806

2018/04/05 05:46

うーんなるほど。CDNを使用すると成功　とあるので、パスが違うのかなと言う風に思った次第です。

kazoogon

2018/04/05 06:10

laravelは最初からvue.jsが入っているので「import Vue from 'vue'」とjsファイルに記載すればvue.jsを読み込んでくれると思っていますが、この認識に間違いはないでしょうか。。？

m.ts10806

2018/04/05 07:26

bladeの中身もご提示いただいて良いですか？もしかしたら読み込む順番とかも関係あるかもしれません。

m.ts10806

2018/04/05 07:30

例えば　https://qiita.com/tabtt/items/11270e4e30ec64b4ab71　を見ますと、特にimportするような記述はしていないように見受けられます。importの記述って必要なんでしょうか？

kazoogon

2018/04/05 07:52

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

m.ts10806

2018/04/05 08:01

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

kazoogon

2018/04/05 08:43

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

行動規範の内容に同意します

回答1件

ベストアンサー

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

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

$ npm run dev

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

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

投稿2018/04/05 10:25

ucan-lab

総合スコア888

kazoogon

2018/04/05 12:25

回答ありがとうございます。 resources/assets/jsにapp2.jsを設置しnpm run devを実行　→browserの検証で確認するとapp2.jsは404のエラーが出ますね。。また「public/js/*.js へ出力されます」=>これは実際にファイルができるということでしょうか。。？

ucan-lab

2018/04/05 14:11 編集

実際にファイルが出力されます。 Laravel-Mixについては一度ドキュメントを確認していただければと思います。 https://readouble.com/laravel/5.5/ja/mix.html app2.js を出力するのであれば、webpack.mix.jsファイルに mix.js('resources/assets/js/app2.js', 'public/js') と追記する必要があるかと思います。ビルドして通常は public/js/app.js に1ファイルにまとめます。 app2.js, app3.js と増やしていくのではなく、 resources/assets/js/app.js に require して読み込ませていくのが良いと思います。

kazoogon

2018/04/06 01: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 }) と記載しております。

kazoogon

2018/04/06 01:54

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

ucan-lab

2018/04/06 04:05

public/js/app.js, public/js/app2.js の両ファイルを読み込んでいるのであれば、app.jsでvueが読み込まれているのでエラーが出てないんだろうと思います。ひとまずこれ以降は別課題というか設計に寄ると思います。仕組み周りの説明をここでするのは私にはちょっと力不足です、すみません。まずは身近な人に聞いたり、質問者さんご自身で学習された方が良いと思います。調べた結果わからないところはteratailで質問されるのが良いと思います。

行動規範の内容に同意します