vue.js报错 [Vue warn]: Cannot find element: #app

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

本文介绍了在使用Vue.js进行案例练习时遇到的[Vue warn]: Cannot find element: #app错误的原因及解决办法。错误源于JS文件提前加载导致#app元素未能正确识别。通过调整JS文件加载位置至底部，确保DOM完全加载后再执行JS，从而避免该问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在做vue.js案列练习时，会出现 [Vue warn]: Cannot find element: #app的错误；

原因是：我把相关的js文件放在head里面，导致文件未加载完成就运行js文件，所以js找不到 #app 。


改正： 把相关js文件放至尾部，保证页面全部渲染完成才加载js，就可以避免这个错误。

vue 动态加载路由时报错Error: Cannot find module ‘@/views/xxx‘ at webpackEmptyContext
bihaiyanyu的专栏
11-16 2万+
前几天写代码，写着写着，突然报了一个很奇怪的bug： 解决方法如下： 删除项目下面的label.config.js 授人以鱼不如授人以渔，以下是排查过程的思路，及排查过程尝试过的方法： 该错误是点左边菜单树的时候报错，打不开页面，开始以为是修改到了路由相关代码导致的，于是各种检查，没有发现任何异常代码。接下来发现更离谱的事情是打包发到测试环境和线上没这个问题，本地死活不行，把代码回退到之前很老的版本，还是报这个错。 接下来梳理报错前到底我做了哪些操作导致这个错误，由于公司是内外网隔离，内网
vue项目报错
weixin_64948861的博客
02-28 1613
ERROR Error loading E:\daima\vue\vue项目\vue-lokoes\project-v2\vue.config.js: ERROR ReferenceError: ture is not defined ReferenceError: ture is not defined at Object. (E:\daima\vue\vue项目\vue-lokoes\project-v2\vue.config.js:3:15) at Mod
[Vue warn]: Cannot find element: #app
热门推荐
linyeban的博客
01-20 2万+
学习vue的时候，刚开始按照官网的例子敲写，却出现以下的问题：   问题：这是因为你的js在html页面头部引入的原因，自定义js文件要最后引入，因为要先有元素id,vue才能获取相应的元素 html> html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> head>     meta charset="UTF-8
vue3 关闭 vue warn
最新发布
夕降巫咸的博客
05-28 223
本文介绍了在Vue.js中关闭和自定义警告处理方法。通过Vue.createApp创建实例后，可以使用vm.config.warnHandler配置警告处理器。将处理函数留空可完全关闭Vue警告，若需自定义处理逻辑则可在函数体内实现特定操作。此方法适用于需要静默警告或定制化警告处理的开发场景，为开发者提供了灵活的警告管理方案。
bundle.js:1350 [Vue warn]: Cannot find element: #app
m0_56063262的博客
01-07 904
bundle.js:1350 [Vue warn]: Cannot find element: #app
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` 函数中尝试设置某个属性时，目标对象未定义。 ### 错误...
Vue.js快速入门实例教程
01-19
什么是vue vue是法语中视图的意思，Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。...否则会报错： [Vue warn]: Cannot find element: #app--> app.js代码： new Vue
关于Vue报错（#[Vue warn]: Cannot find element: #App)
m0_74076532的博客
10-18 5265
关于找不到挂载元素的问题，一般的都是通常因为在public文件中的html.index没有具有相应id的元素。请确保在你的html.idex文件有一个正确的id=App的元素。找到该文件的这个位置并且确认自己挂载的元素是否正确。总结:Vue实例的挂载点选择器与HTML中的元素要匹配。时味Vue无法找到具有id为"App"的元素来挂载Vue实例。具体见浏览器控制台所示。上述报错是我们在写Vue中会可能遇到的错误，当Vue发出警告。另外还报错的话可以看下自己的Vue库是否引入是正确的。
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...
Cannot find element: #App
a662852186的博客
06-10 2815
瞎找了一天都没找到问题所在（问题代码） /* eslint-disable no-new */ new Vue({ el: '#App', router, template: '<App/>', components: { App } }) // new Vue({// 全局构造函数 // el: '#app', // 对象装载的位置...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值