[Vue warn]：找不到元素：#app --Vue.js 2

不重复：已经检查this question和this one;没有得到任何线索。一些类似的与Laravel有关。[Vue warn]：找不到元素：#app --Vue.js 2

无法弄清楚我的项目中发生了什么变化，使得[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的警告被显示。我检查的一个附加问题表明，当脚本运行时，DOM元素还没有准备好。已尝试在main.js（App，Home和VueRouter，如注释中所标记的）切换导入顺序，但没有成功。

任何想法在哪里寻找解决方案？

来源

2017-07-28 AbreQueVoy

你的spa脚本标签应该在#app div标签下。你确定它与你的模板引擎很好吗？ –

您也可以在脚本标记或window.addEventListener（“load”，<您的函数>）中使用'defer'属性;'方法 – Bellian

@Bellian：对此使用jQuery ready函数（请参阅编辑的部分），但没有成功。 – AbreQueVoy

好了，找到的bug：

的index.html：

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

脚本那边是位于构建目录。但是，webpack会即时生成自己的脚本文件并从中运行应用程序。代码中上面提到的脚本只是覆盖之前正确加载的值。删除../dist/目录并对脚本行进行注释使一切恢复正常。

来源

2017-07-28 10:24:20 AbreQueVoy

-1

似乎'main.js'已被放置在header中。去检查你的HtmlWebpackPlugin设置。

来源

2017-07-28 08:54:04

不，该脚本仅在关闭标记之前链接。 – AbreQueVoy

这应该是一个评论，至多。 – SMT

[Vue warn]：找不到元素：#app --Vue.js 2

回答

相关问题