様々なサイトを調べ4時間程ハマっているので質問させてください。

開発環境はDockerを使用しています。

DockerFile
1FROM php:7.2-apache
2COPY php.ini /usr/local/etc/php/
3COPY laravel.test.jp.conf /etc/apache2/sites-available/laravel.test.jp.conf
4RUN apt-get update && \
5 docker-php-ext-install pdo_mysql mysqli
6RUN curl -sL https://deb.nodesource.com/setup_10.x | bash -
7RUN apt-get install -y nodejs
8RUN a2enmod rewrite
9RUN a2enmod headers

laravel5.8をDockerコンテナ上で動作させていただいていると考えてもらって大丈夫です。

現在、laravel上でVue.jsを使用したくサンプルコードを記載してみました。

HeaderComponent
1<template>
2    <div class="container">
3        <div class="row justify-content-center">
4            <div class="col-md-8">
5                <h1>This is header!</h1>
6            </div>
7        </div>
8    </div>
9</template>
10
11<script>
12//とりあえず表示を行いたいのでまだ何も記載していません。
13</script>

appjs
1/**
2 * First we will load all of this project's JavaScript dependencies which
3 * includes Vue and other libraries. It is a great starting point when
4 * building robust, powerful web applications using Vue and Laravel.
5 */
6
7require('./bootstrap');
8
9window.Vue = require('vue');
10
11/**
12 * The following block of code may be used to automatically register your
13 * Vue components. It will recursively scan this directory for the Vue
14 * components and automatically register them with their "basename".
15 *
16 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
17 */
18
19// const files = require.context('./', true, /.vue$/i);
20// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));
21
22Vue.component('example-component', require('./components/ExampleComponent.vue').default);
23
24Vue.component('header-component', require('./components/HeaderComponent.vue').default);
25
26
27/**
28 * Next, we will create a fresh Vue application instance and attach it to
29 * the page. Then, you may begin adding components to this application
30 * or customize the JavaScript scaffolding to fit your unique needs.
31 */
32
33const app = new Vue({
34    el: '#app',
35});
36
37const header = new Vue({
38    el: '#header',
39});
40

----- laravel templates -----

defaultbladephp
1
2<!DOCTYPE html>
3<html lang="{{ app()->getLocale() }}">
4<head>
5    <meta charset="utf-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1">
8
9    <link href="{{ mix('/css/app.css') }}" rel="stylesheet" type="text/css">
10
11    <title>
12        @section('title')
13        @show
14        : test
15    </title>
16</head>
17<body>
18<div class="container">
19    @yield('content')
20</div>
21<script src="{{ mix('/js/app.js') }}"></script>
22</body>
23</html>
24

indexbladephp
1
2@extends('layouts.default')
3
4@section('title','test')
5
6@section('content')
7<h1>example</h1>
8<div id="app">
9    <example-component></example-component>
10</div>
11<h1>header</h1>
12<div id="header">
13    <header-component></header-component>
14</div>
15
16
17@endsection

出力結果としては、example-componentの内容は表示できていますが
内容の変更を行っても何も変更されません。
またheader-componentに関しては何も出力されません。

すべて変更後きちんとホストOS上で npm run dev　とコマンドをうち

npm
1DONE  Compiled successfully in 18120ms                                                                                                                                                             2:36:46 AM
2                                                                                                                                                                                 Asset      Size   Chunks             Chunk Names
3/css/app.css   173 KiB  /js/app  [emitted]  /js/app
4  /js/app.js  1.39 MiB  /js/app  [emitted]  /js/app
5

と表示されています。

Docker上では、npm run watch-pollを行い

npm
1 DONE  Compiled successfully in 9927ms          5:36:27 PM
2                                                                                                                                            Asset      Size   Chunks             Chunk Names
3/css/app.css   173 KiB  /js/app  [emitted]  /js/app
4  /js/app.js  1.39 MiB  /js/app  [emitted]  /js/app
5

と同様に表示されています。

新しく追加したHeader-Componentが表示されない原因や、example-componentが表示はできるが更新ができない
原因がわかる方、何卒ご教授お願い致します。

退会済みユーザー

2019/07/24 23:57

ブラウザのコンソールでは何もエラーは出ていないのでしょうか

SayakaxxSakura

2019/07/25 01:22

はい、出ておりません。

退会済みユーザー

2019/07/25 03:51 編集

> example-componentが表示はできるが更新ができないこれに関しては再ビルドとブラウザリロードは行っていますか？

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

回答2件

自己解決

OutPutされたファイルと実際にmixで読み込んでいるファイルが異なっていました。
/js/app.js/
↓
/public/js/app.js

投稿2019/07/25 07:07

SayakaxxSakura

総合スコア19

Header-Componentが表示されない原因

<div id="app">
    <example-component></example-component>
</div>
<h1>header</h1>
<div id="header">
    <header-component></header-component>
</div>

header-component が <div id="app"></div> の中に入っていないからではないでしょうか。
私もlaravel-mixはよく知りませんがここなど見て思いました。

example-componentが表示はできるが更新ができない

再ビルドとブラウザリロードを確実に行って下さい。
それでも反映されなければキャッシュの可能性があるのでスーパーリロードを試して下さい。
（もしかしたらこの対応でHeaderComponentが表示されないのも解決するかも）

その他

ファイル名は正確に書いて下さい。

HeaderComponent → HeaderComponent.vue
defaultbladephp → default.blade.php

ファイル名の間違いでエラーということも多いので。

投稿2019/07/25 04:17

退会済みユーザー

総合スコア0

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

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

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

laravel5.8でvuejsの表示ができない

その他

関連した質問