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警告。我检查的一个附带问题表明，当脚本运行时，DOM元素还没有准备好。已经尝试在main.js（App，Home和VueRouter，如评论中标记）中切换导入顺序，但没有成功。

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

Answer 1

好的，找到了错误：

<强>的index.html ：

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

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

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

1 个答案: