[Vue warn]: Cannot find element: #app

最新推荐文章于 2025-08-06 21:26:00 发布
原创 最新推荐文章于 2025-08-06 21:26:00 发布 · 2.3w 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文解决了一个Vue初学者常见的问题：由于JS文件引入位置不当导致Vue无法正确获取元素。文章提供了正确的HTML结构示例，说明了自定义JS文件应当放在页面底部的原因。

学习vue的时候，刚开始按照官网的例子敲写，却出现以下的问题：

 

问题：这是因为你的js在html页面头部引入的原因，自定义js文件要最后引入，因为要先有元素id,vue才能获取相应的元素

正确的的代码：

<!DOCTYPE html>
<htmllang="en"xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <metacharset="UTF-8">
    <title>nihao</title>
</head>
<body>
<divid="app">
    {{ message }}
</div>
<scriptsrc="vue.js"></script>
<script src="index.js"></script><!--这里自定js文件要在最后引入。-->
</body>
</html>

vue 动态加载路由时报错Error: Cannot find module ‘@/views/xxx‘ at webpackEmptyContext
bihaiyanyu的专栏
11-16 2万+
前几天写代码，写着写着，突然报了一个很奇怪的bug： 解决方法如下： 删除项目下面的label.config.js 授人以鱼不如授人以渔，以下是排查过程的思路，及排查过程尝试过的方法： 该错误是点左边菜单树的时候报错，打不开页面，开始以为是修改到了路由相关代码导致的，于是各种检查，没有发现任何异常代码。接下来发现更离谱的事情是打包发到测试环境和线上没这个问题，本地死活不行，把代码回退到之前很老的版本，还是报这个错。 接下来梳理报错前到底我做了哪些操作导致这个错误，由于公司是内外网隔离，内网
Vue.js快速入门实例教程
01-19
什么是vue vue是法语中视图的意思，Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。...否则会报错： [Vue warn]: Cannot find element: #app--> app.js代码： new Vue
vue.js报错 [Vue warn]: Cannot find element: #app
woosido123的博客
07-31 1万+
在做vue.js案列练习时，会出现 [Vue warn]: Cannot find element: #app的错误； 原因是：我把相关的js文件放在head里面，导致文件未加载完成就运行js文件，所以js找不到 #app 。 改正： 把相关js文件放至尾部，保证页面全部渲染完成才加载js，就可以避免这个错误。
vue3 find 数组查找方法
往事知多少？
08-06 276
在 Vue 3 中，如果你想使用find方法来查找数组中的元素，你可以直接在模板中使用该方法，或者在计算属性（computed properties）或方法（methods）中实现。这里将介绍几种不同的使用方式。
vue报错：vue.js:634 [Vue warn]: Cannot find element: #app
热门推荐
宝拉天天想放假
04-09 1万+
编译代码很简单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> <!--<s...
Uncaught ReferenceError: module is not defined at vue.common.dev.js:12008:1了解此错误AI vue.common.dev.js:9095 Download the Vue Devtools extension for a better development experience: https://github.com/vuejs/vue-devtools vue.common.dev.js:9104 You are running Vue in development mode. Make sure to turn on production mode when deploying for production. See more tips at https://vuejs.org/guide/deployment.html index.css:1 Uncaught SyntaxError: Invalid or unexpected token了解此错误AI vue.common.dev.js:630 [Vue warn]: Cannot find element: #app warn @ vue.common.dev.js:630了解此错误AI
03-08
第三个错误是“[Vue warn]: Cannot find element: #app”。这表明Vue实例在挂载时找不到ID为“app”的DOM元素。可能的原因是HTML中没有对应的元素，或者Vue实例在DOM加载之前就执行了。用户需要确认HTML中存在...
<el-form-item label="所属站点”prop="substid"> <el-select filterable v-model="ruleform.substid"placeholder="请选择站点”@change="substidChange"> <el-option v-for="item in substidList" :key="item.substid" :label="item.substname" :value="item.substid"> </el-option> </el-select> </el-form-item>substidChange(){ let that = this; that.editdata = ""; let obj = {}; obj = that.substidList.find((item)=>{ return item.substid === that.ruleform.substid;//筛选出匹配数据 }); that.dataparam.substid = that.ruleform.substid; },切换站点时会报错[Vue warn]: Error in v-on handler: "TypeError: Cannot set properties of undefined (setting 'substid')" found in ---> <ElSelect> at packages/select/src/select.vue <ElFormItem> at packages/form/src/form-item.vue <ElForm> at packages/form/src/form.vue <AlarmEdit> at src/components/system/alarm/AlarmEdit.vue <ElDrawer> at packages/drawer/src/main.vue <AlarmView> at src/components/system/alarm/AlarmView.vue <Main> at src/components/main.vue <App> at src/App.vue <Root> warn @ vue.runtime.esm.js:619 logError @ vue.runtime.esm.js:1893 globalHandleError @ vue.runtime.esm.js:1888 handleError @ vue.runtime.esm.js:1848 invokeWithErrorHandling @ vue.runtime.esm.js:1871 invoker @ vue.runtime.esm.js:2188 invokeWithErrorHandling @ vue.runtime.esm.js:1863 Vue2.$emit @ vue.runtime.esm.js:3903 emitChange @ element-ui.common.js:8763 handleOptionSelect @ element-ui.common.js:8943 invokeWithErrorHandling @ vue.runtime.esm.js:1863 Vue2.$emit @ vue.runtime.esm.js:3903 dispatch @ emitter.js:29 selectOptionClick @ element-ui.common.js:8123 click @ element-ui.common.js:7977 invokeWithErrorHandling @ vue.runtime.esm.js:1863 invoker @ vue.runtime.esm.js:2188 original._wrapper @ vue.runtime.esm.js:6961 vue.runtime.esm.js:1897 TypeError: Cannot set properties of undefined (setting 'substid') at VueComponent.substidChange (AlarmEdit.vue:204:1) at invokeWithErrorHandling (vue.runtime.esm.js:1863:26) at VueComponent.invoker (vue.runtime.esm.js:2188:14) at invokeWithErrorHandling (vue.runtime.esm.js:1863:26) at VueComponent.Vue2.$emit (vue.runtime.esm.js:3903:9) at VueComponent.emitChange (element-ui.common.js:8763:14) at VueComponent.handleOptionSelect (element-ui.common.js:8943:14) at invokeWithErrorHandling (vue.runtime.esm.js:1863:26) at VueComponent.Vue2.$emit (vue.runtime.esm.js:3903:9) at VueComponent.dispatch (emitter.js:29:22)
03-30
从错误提示 `[Vue warn]: Error in v-on handler: "TypeError: Cannot set properties of undefined (setting 'substid')"` 中可以看出，在 `substidChange` 函数中尝试设置某个属性时，目标对象未定义。 ### 错误...
<template> <div class="navbar"> <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> <breadcrumb v-if="!topNav" id="breadcrumb-container" class="breadcrumb-container" /> <top-nav v-if="topNav" id="topmenu-container" class="topmenu-container" /> <div class="right-menu"> <template v-if="device!=='mobile'"> <search id="header-search" class="right-menu-item" /> <!-- <el-tooltip content="源码地址" effect="dark" placement="bottom"> <ruo-yi-git id="qiya-git" class="right-menu-item hover-effect" /> </el-tooltip> --> <!-- <el-tooltip content="文档地址" effect="dark" placement="bottom"> <ruo-yi-doc id="qiya-doc" class="right-menu-item hover-effect" /> </el-tooltip> --> <screenfull id="screenfull" class="right-menu-item hover-effect" /> <el-tooltip content="布局大小" effect="dark" placement="bottom"> <size-select id="size-select" class="right-menu-item hover-effect" /> </el-tooltip> </template> <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover"> <div class="avatar-wrapper"> <img :src="avatar" class="user-avatar"> <span class="user-nickname"> {{ nickName }} </span> </div> <el-dropdown-menu slot="dropdown"> <router-link to="/user/profile"> <el-dropdown-item>个人中心</el-dropdown-item> </router-link> <el-dropdown-item divided @click.native="logout"> <span>退出登录</span> </el-dropdown-item> </el-dropdown-menu> </el-dropdown> <div class="right-menu-item hover-effect setting" @click="setLayout" v-if="setting"> <svg-icon icon-class="more-up" /> </div> </div> </div> </template> <script> import { mapGetters } from 'vuex' import Breadcrumb from '@/components/Breadcrumb' import TopNav from '@/components/TopNav' import Hamburger from '@/components/Hamburger' import Screenfull from '@/components/Screenfull' import SizeSelect from '@/components/SizeSelect' import Search from '@/components/HeaderSearch' import QiYaGit from '@/components/QiYa/Git' import QiYaDoc from '@/components/QiYa/Doc' export default { emits: ['setLayout'], components: { Breadcrumb, TopNav, Hamburger, Screenfull, SizeSelect, Search, QiYaGit, QiYaDoc }, computed: { ...mapGetters([ 'sidebar', 'avatar', 'device', 'nickName' ]), setting: { get() { return this.$store.state.settings.showSettings } }, topNav: { get() { return this.$store.state.settings.topNav } } }, methods: { toggleSideBar() { this.$store.dispatch('app/toggleSideBar') }, setLayout(event) { this.$emit('setLayout') }, logout() { this.$confirm('确定注销并退出系统吗？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(async () => { try { // 1. 显示加载状态 const loadingInstance = this.$loading({ fullscreen: true }); // 2. 取消所有进行中的请求 if (this.$http.cancelAllRequests) { this.$http.cancelAllRequests('Operation canceled by logout'); } // 3. 执行退出操作 await this.$store.dispatch('LogOut'); // 4. 完全重置前端状态 this.resetApplicationState(); // 5. 导航到登录页（不刷新） await this.$router.push({ path: '/login', query: { logout: 'success', t: Date.now() // 防止缓存 } }); // 6. 显示退出成功消息 this.$message.success('您已安全退出系统'); } catch (error) { console.error('退出失败:', error); } finally { this.$nextTick(() => { loadingInstance.close(); }); } }).catch(() => {}); }, resetApplicationState() { // 清除所有存储 localStorage.clear(); sessionStorage.clear(); // 重置Vuex状态 this.$store.commit('RESET_ALL_STATE'); // 清除axios默认头 delete axios.defaults.headers.common['Authorization']; // 重置路由 this.$router.app.$options.router.matcher = new Router().matcher; } } } </script> <style lang="scss" scoped> .navbar { height: 50px; overflow: hidden; position: relative; background: #fff; box-shadow: 0 1px 4px rgba(0,21,41,.08); .hamburger-container { line-height: 46px; height: 100%; float: left; cursor: pointer; transition: background .3s; -webkit-tap-highlight-color:transparent; &:hover { background: rgba(0, 0, 0, .025) } } .breadcrumb-container { float: left; } .topmenu-container { position: absolute; left: 50px; } .errLog-container { display: inline-block; vertical-align: top; } .right-menu { float: right; height: 100%; line-height: 50px; &:focus { outline: none; } .right-menu-item { display: inline-block; padding: 0 8px; height: 100%; font-size: 18px; color: #5a5e66; vertical-align: text-bottom; &.hover-effect { cursor: pointer; transition: background .3s; &:hover { background: rgba(0, 0, 0, .025) } } } .avatar-container { margin-right: 0px; padding-right: 0px; .avatar-wrapper { margin-top: 10px; position: relative; .user-avatar { cursor: pointer; width: 30px; height: 30px; border-radius: 50%; } .user-nickname{ position: relative; bottom: 10px; font-size: 14px; font-weight: bold; } .el-icon-caret-bottom { cursor: pointer; position: absolute; right: -20px; top: 25px; font-size: 12px; } } } } } </style> 点击退出登录报错：退出失败: TypeError: Cannot read properties of undefined (reading 'cancelAllRequests') at eval (Navbar.vue:109:1) at Generator.eval (regenerator.js:52:1) at Generator.eval [as next] (regeneratorDefine.js:11:1) at asyncGeneratorStep (asyncToGenerator.js:3:1) at _next (asyncToGenerator.js:17:1) at eval (asyncToGenerator.js:22:1) at new Promise (<anonymous>) at eval (asyncToGenerator.js:14:1) overrideMethod @ hook.js:608 eval @ Navbar.vue:132 eval @ regenerator.js:52 eval @ regeneratorDefine.js:11 asyncGeneratorStep @ asyncToGenerator.js:3 _next @ asyncToGenerator.js:17 eval @ asyncToGenerator.js:22 eval @ asyncToGenerator.js:14 Promise.then logout @ Navbar.vue:103 click @ Navbar.vue:91 invokeWithErrorHandling @ vue.runtime.esm.js:1854 invoker @ vue.runtime.esm.js:2179 original._wrapper @ vue.runtime.esm.js:6917 Navbar.vue:106 [Vue warn]: Error in nextTick: "ReferenceError: loadingInstance is not defined" found in ---> <Navbar> at src/layout/components/Navbar.vue <Layout> at src/layout/index.vue <App> at src/App.vue <Root> overrideMethod @ hook.js:608 warn @ vue.runtime.esm.js:619 logError @ vue.runtime.esm.js:1884 globalHandleError @ vue.runtime.esm.js:1879 handleError @ vue.runtime.esm.js:1839 eval @ vue.runtime.esm.js:1982 flushCallbacks @ vue.runtime.esm.js:1906 Promise.then timerFunc @ vue.runtime.esm.js:1933 nextTick @ vue.runtime.esm.js:1990 Loading @ element-ui.common.js:28724 eval @ Navbar.vue:106 eval @ regenerator.js:52 eval @ regeneratorDefine.js:11 asyncGeneratorStep @ asyncToGenerator.js:3 _next @ asyncToGenerator.js:17 eval @ asyncToGenerator.js:22 eval @ asyncToGenerator.js:14 Promise.then logout @ Navbar.vue:103 click @ Navbar.vue:91 invokeWithErrorHandling @ vue.runtime.esm.js:1854 invoker @ vue.runtime.esm.js:2179 original._wrapper @ vue.runtime.esm.js:6917 Navbar.vue:106 ReferenceError: loadingInstance is not defined at VueComponent.eval (Navbar.vue:135:1) at Array.eval (vue.runtime.esm.js:1980:1) at flushCallbacks (vue.runtime.esm.js:1906:1)
最新发布
08-25
通常，我们在 Vue 项目中会将 axios 挂载到 Vue 原型上，比如在 main.js 中： Vue.prototype.$http = axios; 但是，如果项目中没有这样做，那么 `this.$http` 就是 undefined。 我们可以检查一下项目中的 axios ...
bundle.js:1350 [Vue warn]: Cannot find element: #app
m0_56063262的博客
01-07 907
bundle.js:1350 [Vue warn]: Cannot find element: #app
关于Vue报错（#[Vue warn]: Cannot find element: #App)
m0_74076532的博客
10-18 5311
关于找不到挂载元素的问题，一般的都是通常因为在public文件中的html.index没有具有相应id的元素。请确保在你的html.idex文件有一个正确的id=App的元素。找到该文件的这个位置并且确认自己挂载的元素是否正确。总结:Vue实例的挂载点选择器与HTML中的元素要匹配。时味Vue无法找到具有id为"App"的元素来挂载Vue实例。具体见浏览器控制台所示。上述报错是我们在写Vue中会可能遇到的错误，当Vue发出警告。另外还报错的话可以看下自己的Vue库是否引入是正确的。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值