Homestead(Laravel)でVue.jsが使えない

Question

前提・実現したいこと

Homestead(vagrant)で作成したLaravel5.8環境でVue.jsを使えるようにしたいです。
以前、vagrantではなくMacのLocal上にLaravelの環境を作ってphp artisan serve したときはうまくいったんですが。。

発生している問題・エラーメッセージ

Laravelにはデフォルトでexample-componentというコンポーネントがあると思いますが、それを表示できません。

Chromeのvue.js devtoolにも「vue.js is not detected」と表示されます。

該当のソースコード

<div id="app">
	<example-component></example-component>
</div>
<script src="{{ mix('js/app.js') }}"></script>

//app.js

import Vue from 'vue'

require('./bootstrap');
require('./main');

window.Vue = require('vue');

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

const app = new Vue({
    el: '#app',
});

//ExampleComponent.vue
<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

試したこと

scriptにdeferを付けてみたりしました。ダメでした。

<script src="{{ mix('js/app.js') }}" defer></script>

補足情報（FW/ツールのバージョンなど）

※host側で常にnpm run watch しています。
※vagrant側でphp artisan serveして、http://127.0.0.1:8000/で開発しています。

Answer 1

app.js

require('./bootstrap');
require('./main');

window.Vue = require('vue');

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

Vue.config.devtools = true;

const app = new Vue({
    el: '#app',
});

としていたのですが、require('./main');で読み込んでいるmain.jsでエラーが出ていたのでそのあとの処理が止まっていたようでした。
require('./main');の位置を変えたらコンポーネントが表示されるようになりました。

Answer 2

Homestead.yamlファイルにip（Vagrant に割り当てられるIP）が設定されていますか？
cd ~/app/Homestead
vim Homestead.yaml

Homesteadが起動しているならhostsの設定次第ですが　homestead.test　でアクセスできると思いますが。

localhostでなく　Vagrant に割り当てられるIP　でアクセスしてみては。

vagrantの内部でページ情報を取得したときは表示または取得できるか。
この場合は設定などが間違っていませんか。

macのパソコンのブラウザから表示させようとして上手くいかないのか。
アクセス方法などが間違っているのか。

エラーログなどは出力されていませんか？
strage/log

Comments

[YusakuFukuda]

>Vagrant に割り当てられるIP　でアクセス
こっちでやっても変わらないですねえ。。というよりこっちでやってうまくいかなかったのでlocalhostで試している感じです。

>macのパソコンのブラウザから表示させようとして上手くいかないのか。
アクセス方法などが間違っているのか。

環境はwin8です。
ブラウザで画面の表示はできているのですが、Vueのコンポーネントのみ表示されないような感じです。

Logにもなんにも出てないですね。。

[tukatter]

ブラウザでlocalhost表示しているなら
MacのLocal上に構築しているLaravelが動いているということでは？
Vagrant でアクセスして任意の場所でphpファイルを作って　file_get_contents(url)でローカルで実行されているものを出力してみるとどうでしょうか。
どちらで動いているかというところも把握しながらです。
Vagrant に割り当てられるIPでアクセスできないなら動作していないのか。→Homestead.yamlの中身は見ましたか？

[YusakuFukuda]

すいません。私の伝え方が悪かったのですがVagrantのipでアクセスはできています！Homestead.yamlに記載しているhoge.localみたいなかんじで。
そのやり方でVue.jsがうまくいかなかったのでlocalhostでも試しているという感じです。

[YusakuFukuda]

ですからvagrant上のLaravelが動いているのは間違いないです

[tukatter]

動作はするのですね。わかりました。

トップページは動いている（laravel自体は動いている）ということでいいのでしょうか。

記述はあっていそうですよね。
アクセスするurlさえ正しければ動きそうですが。
routes/web.php　laravelならここの設定など。

Vueのツールを使うなら。

new Vueする前に以下のように記述してみては。
ex.)
Vue.config.devtools = true;
const app = new Vue({
el: '#app',
});

これでVue　toolアイコンをクリックするとメッセージ出たように思いますが。
「Vue.js is detected on this page. Open DevTools and look for the Vue panel.」

あとはchromeのディベロッパーツールの　Networkタブにある Disable cacheにチェックを入れるとか。

production版（minified版）のvue.jsを利用していたりすると
vue.js devtoolは動作しないかったように思います。　minify版って圧縮されているjsのこと。

npm run production　でなく　npm run dev　で生成されたファイルでするとかだったような。
構成によりますので一概には言えません。

[YusakuFukuda]

>トップページは動いている（laravel自体は動いている）ということでいいのでしょうか。
はい。トップページ以外にも複数ページがありますが、正しく動いています。

Disable cacheにチェックを入れ、
Vue.config.devtools = true;
const app = new Vue({
el: '#app',
});
としてもdev toolが使えないですね。。(Vue.js not detected)

npm run watchでビルドしています

[tukatter]

だめでしたか。
webpack.mix.jsというファイルはどうでしょうか。

app.jsはどこのフォルダにあるものでしょうか？
resources/assets/js/app.js　ここですよね？

chromeのvue.js devtoolのアイコンを右クリックして
ファイルを許可するような選択支がないか。

Vue.jsのライブラリのソース自体は、
圧縮されていない状態のものを利用されていますか？
resources/assets/jsにあるものか　どこかから引用されるものなのか。

[YusakuFukuda]

app.jsは
resources/js/app.jsにあります。

webpack.mix.jsの中身も
mix.js('resources/js/app.js', 'public/js')
というような感じになっていますね。

＞Vue.jsのライブラリのソース自体は、
圧縮されていない状態のものを利用されていますか？

すいません。これがどういう意味かよくわからないのですが、自分はnpm installで取ってきました。

[tukatter]

あ。
よかったですね。
お役に立てずにすみませんｗ
これからもがんばってください。
デバッグモードで実行しようとおもったら　vue.min.jsという
改行とか空白や余計な文字を排除したミニマム圧縮化したファイルではできないので
vue.jsという加工する前のソースを利用する必要があるので。
npm run watch　をしたあとにapp.jsの中身がどうなっているかみておくといいと感じました。＞vue.js devtoolがデバッグできない理由

でも、別のところのエラーだったことがわかったので解決できてよかったです。

[YusakuFukuda]

いえいえ、わざわざありがとうございました！！