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

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

ただいまの
回答率

90.34%

  • Laravel 5

    2065questions

    Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

  • Vue.js

    834questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 407

o_matsu555

score 4

 前提・実現したいこと

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

<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>Vue TODO</title>
        <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    </head>
    <body>
        <div id="app">
          <router-view></router-view>
        </div>
    </body>

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

resources/assets/app.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import ElementUI from 'element-ui'
import locale from 'element-ui/lib/locale/lang/ja'
import 'element-ui/lib/theme-chalk/index.css'
require('./bootstrap');

window.Vue = require('vue');
Vue.use(ElementUI, { locale })
Vue.use(VueRouter);

const temp = {
  template: '<div>It works!</div>'
}

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: require('./components/index.vue') },
  ]
});

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

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>

 試したこと

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

1. ローカルで作成したプロジェクトをXSERVER側で"git clone"
2. Laravelセットアップのため、"composer install", "php artisan key:generate"の実行と「.env」の作成
3. "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
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

check解決した方法

+2

 自己解決しました。

その後、ローカル環境との違いを必死に調べて修正して行った結果無事に動作させることができました。
解決方法は、以下の通りです。

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

同じタグがついた質問を見る

  • Laravel 5

    2065questions

    Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

  • Vue.js

    834questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。