<router-view>がレンダリングされない

前提・実現したいこと

Laravel(5.5)+Vue.js(2.5.7)でXSERVER上にSPAのtodoリストを作っています。
ローカル環境で"php artisan serve"で動かす場合には、問題なく動作するのですが、
bitbucket経由で"git clone"したXSERVERでは、<router-view>がレンダリングされません。

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

「app.blade.php」は表示されるのですが、
"<router-view></router-view>"の部分が
ブラウザで""に置き換わっています。
エラーメッセージも表示されないので、どう調べたら良いか分からず困っています。
原因分かりますでしょうか。

該当のソースコード

resources/view/app.blade.php

php
1<!DOCTYPE html>
2<html lang="{{ config('app.locale') }}">
3    <head>
4        <meta charset="utf-8">
5        <meta http-equiv="X-UA-Compatible" content="IE=edge">
6        <meta name="viewport" content="width=device-width, initial-scale=1">
7        <meta name="csrf-token" content="{{ csrf_token() }}">
8        <title>Vue TODO</title>
9        <link rel="stylesheet" href="{{ asset('css/app.css') }}">
10    </head>
11    <body>
12        <div id="app">
13          <router-view></router-view>
14        </div>
15    </body>
16
17    <script src="{{ asset('js/app.js') }}"></script>
18</html>

resources/assets/app.js

javascript
1import Vue from 'vue'
2import VueRouter from 'vue-router'
3import ElementUI from 'element-ui'
4import locale from 'element-ui/lib/locale/lang/ja'
5import 'element-ui/lib/theme-chalk/index.css'
6require('./bootstrap');
7
8window.Vue = require('vue');
9Vue.use(ElementUI, { locale })
10Vue.use(VueRouter);
11
12const temp = {
13  template: '<div>It works!</div>'
14}
15
16const router = new VueRouter({
17  mode: 'history',
18  routes: [
19    { path: '/', component: require('./components/index.vue') },
20  ]
21});
22
23const app = new Vue({
24  el: '#app',
25  router,
26});

resources/assets/components/index.vue

<template>
    <el-row :gutter="20">
      <el-col :span="20" :offset="2">
        <h1>{{ inputtitle }}</h1>
        <el-form :inline="true" class="demo-form-inline" @submit.prevent.native="doAdd" :model="input">
          <el-form-item label="TASK">
            <el-input v-model="input.comment" placeholder="input something ..." ref="comment"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="doAdd">ADD</el-button>
          </el-form-item>
        </el-form>


        <h1>{{ tabletitle }}</h1>
        <el-tag type="info" size="small">{{ computedTodos.length }} / {{ todos.length }}</el-tag>
        <el-radio-group v-model="current">
          <el-radio :label="-1">all</el-radio>
          <el-radio :label="0">working</el-radio>
          <el-radio :label="1">done</el-radio>
        </el-radio-group>
        <el-table :data="computedTodos" style="width: 100%">
          <el-table-column prop="id" label="ID" width="180"></el-table-column>
          <el-table-column prop="comment" label="comment" width="180"></el-table-column>
          <el-table-column prop="state" label="state" :filters="option" :filter-method="filterHandler">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.state"></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="">
            <template slot-scope="scope">
              <el-button type="danger" icon="el-icon-delete" circle @click="doRemove(scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
</template>


<script>
// ローカルストレージAPI
// https://jp.vuejs.org/v2/examples/todomvc.html
var STORAGE_KEY = 'todos-vuejs-demo'
var todoStorage = {
  fetch: function() {
    var todos = JSON.parse(
      localStorage.getItem(STORAGE_KEY) || '[]'
    )
    todos.forEach(function(todo, index) {
      todo.id = index
    })
    todoStorage.uid = todos.length
    return todos
  },
  save: function(todos) {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
  }
}


export default {
  data() {
    return {
      tabletitle: "TODOリスト",
      inputtitle: "タスクの追加",
      current: -1,
      todos: [],
      input: {
        comment: "",
      },
      option: [
        {text: "done", value: true},
        {text: "working", value: false},

      ]
    };
  },
  methods: {
    doAdd: function() {
      // ref で名前を付けておいた要素を参照
      // var comment = this.$refs.comment.$el.getElementsByTagName('input')[0];
      // console.log(this.input.comment);
      // 入力がなければ何もしないで return
      if (!this.input.comment.length) {
        return
      }
      // { 新しいID, コメント, 作業状態 }
      // というオブジェクトを現在の todos リストへ push
      // 作業状態「state」はデフォルト「作業中=0」で作成
      this.todos.push({
        id: todoStorage.uid++,
        comment: this.input.comment,
        state: 0
      })
      // フォーム要素を空にする
      this.input.comment = '';
    },
    doChangeState: function(todo) {
      todo.state = todo.state ? 0 : 1;
    },
    doRemove: function(todo) {
      var index = this.todos.indexOf(todo)
      this.todos.splice(index, 1);
    },
    filterHandler: function(value, row, column) {
      return row.state === value;
    },
  },
  watch: {
    todos: {
      handler: function(todos) {
        todoStorage.save(todos);
      },
      deep: true
    }
  },
  created() {
    this.todos = todoStorage.fetch();
  },
  computed: {
    computedTodos: function() {
      return this.todos.filter(function(el) {
        console.log(el);
        return this.current < 0 ? true : Boolean(this.current) === el.state;
      }, this);
    }
  }
};
</script>

試したこと

この問題に突き当たってからは、エラーも表示されずで、お手上げ状態です。
参考までに、ここに辿り着くまでに、実施したことを書いておきます。

１.　ローカルで作成したプロジェクトをXSERVER側で"git clone"
２.　Laravelセットアップのため、"composer install", "php artisan key:generate"の実行と「.env」の作成
３.　"ln -s $HOME/URL/todo_note/public $HOME/URL/public_html/todo_note"でシンボリックリンク作成

※「.env」の設定がよく分からず、とりあえず「.env.example」をコピーして、"APP_URL"だけ書き換えています。

補足

vuerouterが破損しているのかと思い、xserver上で"npm install"を実行すると、以下のエラーが表示されました。これが関係しているのでしょうか。
しかし、"yum install libpng-dev"とすると、xserverに怒られてしまいます。。

Error: pngquant failed to build, make sure that libpng-dev is installed

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

回答1件

自己解決

自己解決しました。

その後、ローカル環境との違いを必死に調べて修正して行った結果無事に動作させることができました。
解決方法は、以下の通りです。
0. 「node_module」がなかったので、"npm install"で作成
→そのまま実行すると、libpng-devがないと怒られた。
→しかし、XSERVERでは"yum install libpng-dev"の実行権限がない。
→"wget"コマンドからlibpng-devをインストール後、"npm install"で無事解決
※しかし、これだけでは現象回避できませんでした。
0. ローカルとサーバでパスが違っていたので修正
→当初、ローカルが"http://localhost/"、サーバーが"http://URL/[appName]/"となっていた。
→結果、vueRouterからすると、rootを見に来ていないので、レンダリングしてくれなかったようです。
→サーバーのサーバー側のパスを修正して無事に解決できました。