javascript - [Vue 警告] : Cannot find element: #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]

ma​​in.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)
})

编辑:将最后一个 block 更改为:

$(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，如评论中所标记)，但没有成功。

知道在哪里寻找解决方案吗？

Answer 1

好的，找到错误了:

index.html:

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

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