学生信息管理系统 （第一天 ）技术汇总及问题解决

1. [Vue warn]: Do not use built-in or reserved HTML elements as component id: xxx

[Vue warn]: Do not use built-in or reserved HTML elements as component id: Switch

使用vue时出现这样的报错，原因是你使用的组件名 “Switch” 跟系统（vue）的内置属性名冲突了，所以创建失败，最好的方法就是换个名字。

---

2. 关于动态绑定 <img>、<video>标签的属性src动态绑定无效解决办法

• 解决方法： 动态生成的路径中加上 require ，可成功加载图片，视频。

---

3. 报错： Array prototype is read only, properties should not be added.

做项目时，需要删除数组指定元素，由于 JavaScript 的 Array 对象没有 remove 方法，所以打算给 Array 对象新增一个原型方法remove() 。

代码如下：

Array.prototype.remove = function (val) {
    
    
  var index = this.indexOf(val)
  if (index > -1) {
    
    
    this.splice(index, 1)
  }
}

但出现如下报错：

其实写的代码是没有问题的，这是 eslint 语法检验有问题，我们可以添加如下注释，来忽视这条检验错误：

/* eslint-disable no-extend-native */

添加位置在代码块的上面：

扫描二维码关注公众号，回复： 12429447 查看本文章

---

4. 关于动态绑定 <video> 标签下的 <source> 标签下的 src，导致无法动态切换视频解决办法

关于 <source> 标签： <source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。

通过如下代码引入视频路径会导致动态切换视频没反应

• 解决方法： 删除 <source> 标签， 直接在 <video> 标签上 动态绑定 src 即可解决。

---

5. Vue.config.productionTip = false 的意义

Vue.config.productionTip 设置为 false ，阻止启动生产消息，常用作指令，没有 Vue.config.productionTip = false这句代码，它会显示你生产模式的消息。

开发环境下，Vue 会提供很多警告来帮你对付常见的错误与陷阱。
生产环境下，这些警告语句却没有用，反而会增加应用的体积。此外，有些警告检查还有一些小的运行时开销，这在生产环境模式下是可以避免的。

---