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

最新推荐文章于 2024-05-08 10:48:13 发布
最新推荐文章于 2024-05-08 10:48:13 发布
阅读量6.3k 收藏
点赞数 1
分类专栏： 前端 文章标签：  vue.js:597 vue报错
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hua_ban_yu/article/details/80250697
版权

刚开始使用vue的时候发现vue报vue.js:597 [Vue warn]: Cannot find element: #app的错误，初始以为是写的代码有错误导致，于是认真的对照了几遍发现代码和官网的一模一样。代码都一样了，那就排除了是代码愿意导致vue报错，突然想到会不会是把vue.js文件放在head里面导致还没有加载完成就进行渲染，试着把js移到body标签尾部，发现vue可以正常运行了。

解决方法：把对应的js·放在末尾，确保页面全部渲染晚后加载js。

                                                                                                                                                      


hua_ban_yu
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue.js报错Failed to resolve filter问题的解决方法
10-22
主要介绍了Vue.js报错Failed to resolve filter问题的解决方法,需要的朋友可以参考下
learningVue：Vue.js原始码解析
02-06
学习Vue介绍Vue.js源码分析，记录了个人学习Vue.js源码的过程中的一些心得以及收获。以及对于Vue框架，周边库的一些个人见解。在学习的过程中我为Vue.js（2.3.0），Vuex（2.4.0），Vue-router（3.0.1）加上了注释，...
关于Vue报错（#[Vue warn]: Cannot find element: #App)
m0_74076532的博客
10-18 3241
关于找不到挂载元素的问题，一般的都是通常因为在public文件中的html.index没有具有相应id的元素。请确保在你的html.idex文件有一个正确的id=App的元素。找到该文件的这个位置并且确认自己挂载的元素是否正确。总结:Vue实例的挂载点选择器与HTML中的元素要匹配。时味Vue无法找到具有id为"App"的元素来挂载Vue实例。具体见浏览器控制台所示。上述报错是我们在写Vue中会可能遇到的错误，当Vue发出警告。另外还报错的话可以看下自己的Vue库是否引入是正确的。
警告-WARN: vue启动项目有WARN / end value has mixed support, consider using flex-end instead
最新发布
snowball的博客
05-08 862
flex布局中，end具有混合支持，请考虑使用flex-end布局。启动项目发现控制台有这样一个WARN。修改后warn不在了。
vue.js:634 [Vue warn]: Cannot find element: #app
weixin_54106729的博客
08-30 472
input type="button" value="测试springMVC处理Ajax" @click="testAjax">或者加上window.onload=function(){}可以使得该页面首先加载vue,vue.js的手写内容就可放在div之前。手写的vue.js要在div的id声明后后引入。
bundle.js:1350 [Vue warn]: Cannot find element: #app
m0_56063262的博客
01-07 828
bundle.js:1350 [Vue warn]: Cannot find element: #app
vue.js报错 [Vue warn]: Cannot find element: #app
朽木自雕的博客
11-21 2947
报错信息：[Vue warn]: Cannot find element: #app 原因是：我把相关的js文件放在head里面，导致文件未加载完成就运行js文件，所以js找不到 #app 。 改正： 把相关js文件放至尾部，保证页面全部渲染完成才加载js，就可以避免这个错误。 ...
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: #vue-app报错解决
紫月i的博客
10-16 797
[Vue warn]: Cannot find element: #vue-app报错解决 因为使用app.vue单文件组件时，页面先加载出了这个index.js文件，但是没有加载出来id为app的盒子，所以需要把引入js文件的代码写在这个div下面就能解决问题 ...
vue.js浏览器控制台报错：报错 [Vue warn]: Cannot find element:xxx 和一些不小心的错误
qq_56739984的博客
07-31 480
无
[Vue warn]: Cannot find element: #App 报错修改
qq_47254466的博客
03-14 2163
出现 [Vue warn]: Cannot find element: #App此条报错，有可能在main.js中 import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false new Vue({ el:'#app',//app一定是小写，若大写就报错 render: h => h(App), }) 之后 再 npm run serve 就可以了。 ...
[Vue warn]: Cannot find element: #app
weixin_52485116的博客
11-24 2548
看了很多文章是说因为js解析是会先识别id再识别vue,所以会造成这个报错.在public的index.html文件里添加一个id包裹即可;运行vue项目时,遇见这个问题。
vuejs-logger:为Vue.js提供可自定义的日志记录功能。 兼容Vue2
05-25
为Vue.js提供可自定义的日志记录功能。 与Vue2兼容。 目录 执照 演示版 @ https://codepen.io/justinkames/pen/BwGOVQ 介绍 vuejs-logger是一个工具，可为Vue应用程序启用可配置的日志记录。 功能包括： 基于所...
vue.js源代码core scedule.js学习笔记
12-11
Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面。在Vue.js的核心源代码中，`scedule.js`（通常拼写为`scheduler.js`）是负责管理组件更新和渲染调度的关键模块。这个文件的目的是优化性能，确保数据变化...
vue项目运行报Module not found: Error: Can‘t resolve ‘@/component/TaskCard‘错误
热门推荐
hua_ban_yu的博客
03-26 7万+
运行vue项目时报Module not found: Error: Can't resolve '@/component/TaskCard'错误 原因：App.vue文件引入的路径报错 解决方案：修改App.vue文件的引入路径 错误路径： 正确路径： 注意：如果修改路径还报错，请删除node_modules文件夹后重新运行 npm install ...
npm err! a complete log of this run can be found in
hua_ban_yu的博客
09-01 6万+
在安装webpack的时候，运行npm install --save-dev webpack时，终端报npm err! a complete log of this run can be found in错误，想来可能npm出问题了，重新更新一下npm后再次安装webpack就可以了。   更新npm npm install npm -g  使用淘宝镜像命令更新 （速度更快） cnpm ...
vue的 v-for获取循环的下标
hua_ban_yu的博客
05-09 4万+
vue框架中可以使用 v-for 指令可以绑定数组的数据来渲染,那么如何在使用v-for循环的时候获取数组的下标呢？语法：&lt;li v-for="(arr,index) in arr"&gt;{{arr.text}}&lt;/li&gt;      /*index表示当前数组的下标*/ &lt;ul id="app"&gt; &lt;li v-for="(arr,index) in arr...
no such file or directory,找不到package.json错误
hua_ban_yu的博客
09-01 3万+
npm install --save-dev webpack安装时，终端报找不到package.json错误。去对应的文件目录下发现，确实缺少package.json文件。可能是以前不小心把package.json文件删除了，可以直接使用npm init重新初始即可。 输入: npm init  ...
vue.runtime.esm.js:4605 [Vue warn]: Failed to resolve directive: lazy
05-18
这个错误提示是因为你使用了 Vue.js 的 `v-lazy` 指令，但是你没有在 Vue.js 应用中注册该指令。 要解决这个问题，你需要在 Vue.js 应用中注册 `v-lazy` 指令。可以通过全局注册或局部注册来实现。 全局注册： ```javascript import Vue from 'vue'; import VueLazyload from 'vue-lazyload'; Vue.use(VueLazyload, { loading: '/loading.gif', }); ``` 局部注册： ```javascript import Vue from 'vue'; import VueLazyload from 'vue-lazyload'; export default { directives: { lazy: VueLazyload.directive, }, }; ``` 在上面的例子中，我们使用了 [vue-lazyload](https://github.com/hilongjw/vue-lazyload) 库来实现图片懒加载。你需要根据自己的需求选择合适的库来实现 `v-lazy` 指令。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值