解决vue报错 [Vue warn]: Cannot find element: #test

最新推荐文章于 2024-08-07 15:50:58 发布
最新推荐文章于 2024-08-07 15:50:58 发布
阅读量859 收藏
点赞数 1
分类专栏： 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46293423/article/details/115526053
版权
初学者在使用Webpack打包Vue项目时遇到错误，问题在于JS引用顺序。解决方案是将打包后的JS文件引用放置在使用Vue的div元素之后或body标签底部。这是因为脚本需要在DOM加载完成后寻找对应元素，否则会导致Vue无法找到相应的DOM节点从而报错。理解这一点对于在HTML中使用Vue或引用Vue项目至关重要。
摘要由CSDN通过智能技术生成

报错

初学vue和webpack。
我在用webpack来打包使用vue的时候，就出现了这种错误。因为之前一直都是直接在html中写的vue，所以没有出现这种错误。
在这里插入图片描述

解决

我使用的解决方案就是：

把打包好的 js 文件的引用放使用了vue的div的后面。或者直接放在<body>后面

原理

如果引用放在前面，你的脚本是在目标dom元素被加载到dom之前执行 ，而要先找到相应 id 的div，vue才能获取相应的元素，否则就会报错。

所以不管是在html中使用vue还是引用都要注意这一点。

爱吃草莓蛋糕的猴
关注
专栏目录
Vue源码解读（七）：模板编译
qq_35500568的博客
09-28 507
在最开始的章节提到过，我们在使用 vue-cli 创建项目的时候，提供了两个版本供我们使用， Runtime Only 版本和 Runtime + Compiler 版本。Runtime Only 版本是不包含编译器的，在项目打包的时候会把模板编译成 render 函数，也叫预编译。Runtime + Compiler 版本包含编译器，可以把编译过程放在运行时做。 入口 这一块代码量比较多，主要是对各种情况做了一些边界处理。这里只关注主流程。对细节感兴趣的伙伴们可以自行去研究。一般我们使用 Runtime
Vue 指令函数的简写形式
mqingo的博客
01-07 4804
  10指令函数的简写形式.html &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=
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...
[Vue warn]: Cannot find element: #app
weixin_33796177的博客
02-26 143
转自：https://blog.csdn.net/linyeban/article/details/54629869 学习vue的时候，刚开始按照官网的例子敲写，却出现以下的问题： 问题：这是因为你的js在html页面头部引入的原因，自定义js文件要最后引入，因为要先有元素id,vue才能获取相应的元素 正确的的代码： <!DOCTYPE html><html...
解决报错警告 [Vue warn]: Unhandled error during execution of component event handler
最新发布
dawang18232123的博客
08-07 2354
warn]: Unhandled error during execution of component event handler 警告，这个错误信息表明，在组件事件处理程序执行期间出现了未处理的错误。这其实就是表单校验后，有表单项为通过校验，导致有错误产生，但是又没办法跳过，才产生的报错行为。
Vue中引用Ajax后，报错 Cannot find element: #xxx
qq_53298230的博客
05-16 656
Vue中引用Ajax后，报错 Cannot find element: #xxx
vue.js报错 [Vue warn]: Cannot find element: #app
xianrenmodel的博客
10-29 9828
在做vue.js案列练习时，会出现 [Vue warn]: Cannot find element: #app的错误； 原因是：我把相关的js文件放在head里面，导致文件未加载完成就运行js文件，所以js找不到 #app 。 改正： 把相关js文件放至尾部，保证页面全部渲染完成才加载js，就可以避免这个错误。 ---------------------  作者：Zora12050605400...
[Vue warn]: Cannot find element 原因及处理
weixin_45887178的博客
11-14 1万+
vue的第一个入门程序报错：[Vue warn]: Cannot find element 遇到的问题如下： <!DOCTYPE HTML> <html> <meta lang="en" charset="utf-8"> </html> <head> <title>VUE20201109</title> </head> <body> <script src="vue.js">&
Vue v-model指令的学习
mqingo的博客
01-02 4415
v-model指令的学习.html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;v-model指令的学习&lt;/title&gt; &lt;script type="text/javascript" src=&q
vite+vue3+typescript 搭建项目框架
qq_25687271的博客
07-24 1487
最近为了挑战自己，接到公司任务，说要写一个新的系统，心血来潮。就打算用新的技术来搭建一个项目框架。选用了vite + vue3+typescript+vant 来搭建。以下是自己一步一步搭建的过程。以及用自己的血泪踩得深坑。（PS:主要是为了激励自己学习新的技术，所以我的项目是从零开始搭建的，边做边学，哭唧唧） 第一步 搭建基础的项目 Vite是一个 web 开发构建工具，由于其原生 ES 模块导入方法，它允许快速提供代码。 通过在终端中运行以下命令，可以使用 Vite 快速构建 Vue 项目。 ..
vue-webpack
hotboyboy的博客
04-23 317
slot <body> <div id="app"> <cpn><p>我是第一</p></cpn> <cpn></cpn> <cpn></cpn> <cpn> <p>我是最后一个</p> <p>二号和二号</p&gt
解决: Vue报错 Cannot find element: #app
兮赫的博客
09-01 1万+
原因： 在html没有加载完成时，加载了js，导致js找不到vue对应的id，所以报错 解决： 将对应js放到html最后引用即可
关于Vue报错（#[Vue warn]: Cannot find element: #App)
m0_74076532的博客
10-18 4065
关于找不到挂载元素的问题，一般的都是通常因为在public文件中的html.index没有具有相应id的元素。请确保在你的html.idex文件有一个正确的id=App的元素。找到该文件的这个位置并且确认自己挂载的元素是否正确。总结:Vue实例的挂载点选择器与HTML中的元素要匹配。时味Vue无法找到具有id为"App"的元素来挂载Vue实例。具体见浏览器控制台所示。上述报错是我们在写Vue中会可能遇到的错误，当Vue发出警告。另外还报错的话可以看下自己的Vue库是否引入是正确的。
[Vue warn]: Cannot find element: #app1
一只小小的濑名泉的博客
04-07 958
第一次没有用脚手架，直接用script标签导入vue的时候出现的一个错误。 以下是错误案例（简化版） <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>none</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <sc
Vue中出现Can‘t find element错误的解决方法
qq_38024443的博客
10-14 5862
最近刚自学了Vue，想动手试一试 项目结构如下 test.Vue和vue.config.js是自己添加的文件，其余都是新建项目时就有的。 test.Vue一开始如下： <template> <div id="example"> <p>Original message: "{{ message }}"</p> </div> </template> <script> import Vue from
vue报错：[Vue warn]: Cannot find element: #app
qq_45791192的博客
06-30 2805
错误现象： 一开始我一直以为是我引用的vue.js文件有问题，换了好几个，都是一样的错。 原来是手写的vue.js要在最后引入 **因为要先有id为vue-app的div,vue才能获取相应的元素。**又加上浏览器解析js代码是从上往下的。 所以：调整了一下引用 ...
vue 报错解决：TypeError: Cannot read property '_t' of undefined
05-19
这个错误通常是因为在访问 Vue 实例的时候出现了问题。可能是因为变量没有被正确地初始化，或者是因为 Vue 实例没有被正确地创建。 你可以按照以下步骤来解决这个问题： 1. 确认 Vue 实例是否已经被正确地创建。你...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值