首页 > 其他分享 >vue2.x版本中productionTip=false设置无效

vue2.x版本中productionTip=false设置无效

时间:2024-04-11 16:36:19浏览次数:26  
标签:productionTip vue false js 源码 vue2 setTimeout

引用自:https://www.cnblogs.com/javaxubo/p/17397457.html 

 

首先,我们看到vue官网中关于productionTip的API使用:
但是,我在本地中使用却无效,代码如下:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>初识Vue</title><!-- 引入Vue --><script src="../js/vue.js"></script>
</head><body><script>Vue.config.productionTip = false; // 阻止 vue 在启动时生成生产提示</script>
</body></html>

于是,我在网上找了半天解决办法,都说是把vue.js的源码中的productionTip改成false,但是我想知道原因啊,并不是解决办法。
于是,我又去了vue的github中找解决办法,看到别人有提这个问题的。

于是我在底下的评论里看到这条:

大致翻译过来的解释是,在最新版本的Chrome中,在script中使用settimeout,将在允许第一个js完成后立即回调。
我们看一下源码的这部分:

确实是用了一个setTimeout包裹,那么,我们怎么知道这个setTimeout中的内容我在body中script设置的productionTip=false,谁先执行呢?
我们来测试一下:

  • 我们先在body中的script中打印222

  • 然后我们在vue源码中打印config.productionTip

    然后,我们去浏览器的控制台看结果,发现刷新了几下浏览器,有两种结果:

    • 结果1——异常
    • 结果2——正常

原因解释:

  1. 异常返回——先返回true,然后是注释,最后是false,此时,vue.js加载完后执行的222,不会再进行判断,productionTip设置无效
  2. 正常返回——先返回222,后返回false,setTimeout后执行,此时productionTip为false,注释方法后222执行,productionTip设置有效

哦!!到这里我就明白了,原来就是这个setTimeout和body中的script两个比较谁先,由于setTimeout异步,所以返回时间不确定谁快。

解决方法:

    1. 直接源码修改productionTip为false (在vue.js文件中搜索关键字)
    2. 把源码中的setTimeout的时间改为10ms,如下图:

标签:productionTip,vue,false,js,源码,vue2,setTimeout
From: https://www.cnblogs.com/zmy2020/p/18129489

相关文章

  • py_trees Sequence节点参数: memory=True | False
    Python行为树py_trees的一种注意情况:memory=True|Falsepy_trees…composites.Sequence(name=“root”,memory=True)官方文档是这样写的Ifconfiguredwithmemoryandachildreturnedwithrunningontheprevioustick,itwillproceeddirectlytotherunn......
  • Vue2和Vue3的区别
    ①双向数据绑定的原理发生变化Vue2利用defineproperty为每个对象的属性添加监听器,当属性发生变化的时候,自动更新对应的DOM元素  Vue3使用proxy代理技术,代替之前的define方式,代理对象data的所有修改工作Proxy的优势①defineProperty只能监听某个属性,不能对全对象监听②......
  • vue2和vue3的js格式
    vue2<script>//exportdefault的作用是开放里定义的数据和方法exportdefault{name:'App',//和标签中绑定数据放在data(){}里data(){return{name:'张三',age:18,tel:'13888888888'}},......
  • 前端开发之el-table(vue2中)固定列fixed滚动条被固定列盖住
    固定列fixed滚动条被固定列盖住效果图前言解决方案效果图前言在使用fixed固定列的时候会出现滚动条被盖住的情况解决方案改变el-table固定列的计算高度即可.el-table{.el-table__fixed-right,.el-table__fixed{height:auto!important;......
  • [echarts]vue2项目中折柱图-柱形图伪3d效果实现
    不知道是不是现在的版本更新了,echarts-gl在vue2项目中不能适配使用,难蹦一.需求分析与设计思路项目当中遇到改版升级,想要实现如下的一下折柱图的立体效果想在原来平面柱状图的基础上,有立体的效果.本来打算用echarts-gl库来实现3d版的柱形图,但是引入和配置后,浏览器总是......
  • 前端小白的学习之路(Vue2 二)
    提示:学习vue2的第二天,笔记记录:自定义指令,事件修饰符,属性计算,属性监听,属性过滤目录一、自定义指令1.全局注册2.局部注册二、事件修饰符 1.常用事件修饰符1)事件相关修饰符2)键盘事件相关修饰符3)鼠标事件相关修饰符三、属性计算四、属性监听五、属性过滤一、自定......
  • Vue2 + Spring Boot的题库管理和在线考试系统
    一个demo从0到1的搭建~使用mybatisplus快速开发springboot项目(一)--初始化-CSDN博客使用mybatisplus快速开发springboot项目(二)--业务实现_如何用mybatis-plus写业务-CSDN博客使用mybatisplus快速开发springboot项目(三)--JWT拦截器-CSDN博客使用mybatisplus快速开发springboot......
  • Vue2中使用iframe展示文件流(PDF)以及blob类型接口错误展示返回值
    需求使用iframe展示后端接口传输来的文件流(pdf),如果接口返回错误则弹出提示html部分<iframe:src="url"width="100%"/>接口部分//接口封装已忽略,注意:如需接口接收文件流,请在请求中加入responseType:'blob'以及type:"application/json;chartset=UTF-8"function......
  • Property [renew] not found. Using default value [false]
    接口请求时,报错Property[renew]notfound. Usingdefaultvalue[false]返回:Therewasanunexpectederror(type=NotFound,status=404).有两种可能:1、添加扫描路径使用basePackages:@ComponentScan(basePackages={"com.person","com.controller"})2、添加依赖......
  • vue2生命周期及在不同生命周期做哪些事情
    Vue的生命周期就是vue实例从创建到销毁的全过程,也就是newVue()开始就是vue生命周期的开始。Vue实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom->渲染、更新->渲染、卸载等⼀系列过程,称这是Vue的⽣命周期。钩子函数是Vue生命周期中每个阶段......