laravel+react環境で、Vueエラーが出る

Question

やりたい事

VPSのapache上のサブディレクトリでもう一つlaravelを動かそうとしています。
ビューはreactを使っています。
ローカルでは正常にビューが表示されたのですが、サーバにアップすると、トップページが真っ白になり、以下のようなエラーメッセージがchromeコンソールに表示されます。

エラーメッセージ

app.js:38033 [Vue warn]: Cannot find element: #app
warn @ app.js:38033
query @ app.js:43065
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:49281
Vue._init @ app.js:42411
Vue @ app.js:42477
./resources/js/app.js @ app.js:49478
__webpack_require__ @ app.js:20
0 @ app.js:49616
__webpack_require__ @ app.js:20
(anonymous) @ app.js:84
(anonymous) @ app.js:87
app.js:46454 Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
app.js:46463 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html

試した事

・Vueを読み込まないように、app.jsからrequire bootstrapを削除。=>エラーメッセージ変わらず
・<div id="app"></div>を追加。　=> エラーは消えるが、react画面が表示されず真っ白になる

環境

・ubuntu
・apache2
・laravel
・react

自分は、サーバサイドがメインでフロントエンドは苦手です。
詳しい方、どうかご教授お願いします。

Comments

[hoshi-takanori]

React なのになぜ Vue なのかよく分かりませんが、React で Bootstrap を使いたいなら https://react-bootstrap.github.io/ を使えば良いと思います。

[beta]

自分もVueは使った覚えないのに、何故出るのだろうと不思議に思っています。
たぶん、bootstrapに含まれているのかと思い、bootstrapのrequireを削除したという感じです。
ちなみに、bootstrapは使っていません。

[hoshi-takanori]

自分は Laravel さっぱりですが、Laravel さんが勝手に Vue や Bootstrap を入れるんですかね？ どこかにすぐ試せるサンプル転がってませんか？

[beta]

サンプルがあるかどうかは、分からないです。

[hoshi-takanori]

もしかして、もう一つの Laravel プロジェクトの方で Vue + Bootstrap を使ってて、それと混ざっちゃってるとか？ とりあえず、エラーメッセージだけじゃなくて、実際のソースを貼ってくれないと誰にも分からないと思います。

Answer 1

皆さん、助言して下さってありがとうございます。
自分でも色々試してみた所、どうやらサブディレクトリの設定が原因のようでした。
そちらの方をしばらく試行錯誤してみたいと思います。

Answer 2

resources/assets/js/app.js
を参照のこと
ここにVue関連の記述がされています。bootstrapは関係ありません。

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('example', require('./components/Example.vue'));

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

こんな感じのブロックごと消せば解決しそうですが・・・

また他のタスクランナーをご使用であればapp.jsごと消しても良いかと思います