[Vue警告]：要素を見つけることができません：#app - Vue.js 2

Question

重複していません：既にチェックthis questionとthis oneです。何の手がかりも得られなかった。同様のもののいくつかはLaravelに関連しています。

[Vue warn]: Cannot find element: #appを私のプロジェクトで変更したことが分かりません。

構造：

のindex.htmlは：<div id="app">をホスト：

[HEADER] 

<div id="app" v-cloak></div> 

[FOOTER] 

main.js：

import Vue from 'vue'; 
import Users from './Users.vue'; 
import App from './App.vue';    // (1) 
import Home from './Home.vue';   // (2) 
import VueRouter from 'vue-router';  // (3) 

Vue.use(VueRouter); 

const routes = [ 
    {path: '/users', component: Users}, 
    {path: '/', component: Home} 
]; 

const router = new VueRouter({ 
    routes 
}); 

new Vue({ 
    el: '#app', 
    router, 
    render: h => h(App) 
}) 

編集：に最後のブロックが変更されました：

$(document).ready(function() { 
    new Vue({ 
    el: '#app', 
    router, 
    render: h => h(App) 
    }) 
}) 

それでも役に立たなかった。

App.vue：

<template> 
    <router-view> 
</router-view> 
</template> 

<script> 
export default { 
    data() { 
    return { 
     message: "Test message" 
    } 
    } 
} 
</script> 

Home.vue：私はインデックスページを取得するたびに

<template> 
    [contents] 
    [router-links] 
</template> 

<script> 
    [data] 
    [methods] 
</script> 

は、Vueのは、警告が表示されます。私がチェックした添付の質問の1つは、スクリプトの実行中にDOM要素が準備ができていないことを示唆していました。すでにmain.js（App、Home、VueRouter、コメント欄にマークされている）の輸入順を切り替えようとしましたが、成功しませんでした。

解決策を探す場所はありますか？

Answer 1

オーケーは、バグを見つけました：

index.htmlを：

(...) 
     </footer> 
    <script src="../dist/build.js"></script> 
</body> 

あそこスクリプトがビルドディレクトリにあります。しかし、webpackはその場で独自のスクリプトファイルを生成し、そこからアプリケーションを実行します。上記のコードで述べたスクリプトは、以前に正しく読み込まれた値を単に上書きしていました。ディレクトリ../dist/を削除してスクリプト行をコメントアウトすると、すべてが正常に戻りました。

Answer 2

「main.js」がheaderに配置されているようです。 HtmlWebpackPluginの設定を確認してください。