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

Posted 2023-02-22

【中文标题】[Vue 警告]：找不到元素：#app - Vue.js 2

【英文标题】：[Vue warn]: Cannot find element: #app - Vue.js 2

【发布时间】：2018-01-04 06:01:41

【问题描述】：

不是重复的：已经检查了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)
)

编辑：将最后一个块更改为：

$(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，在 cmets 中标记）中切换导入顺序，但没有成功。

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

【问题讨论】：

您的水疗中心的script 标签应位于#app div 标签下方。您确定它与您的模板引擎配合良好吗？

也可以在脚本标签中使用defer属性或者window.addEventListener("load", <your function>);方法

@Bellian：为此使用了 jQuery 就绪函数（参见编辑部分），但没有成功。

yan，您还发布了包含 main.js 的位置和方式？

@Bellian: 由webpack处理，链接在标签的末尾。

【参考方案1】：

好的，找到bug了：

index.html：

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

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