Vue2 常见问题汇总及解决方案

参考：https://mp.weixin.qq.com/s/6Wapb1bZLQaYv0zlip6ygg

1.安装超时(install timeout)

　　方案：

?

1 2 3 4 5 6 7 8 9 10 11 12

cnpm : 国内对npm的镜像版本 /* cnpm website: https://npm.taobao.org/ */ npm install -g cnpm --registry=https://registry.npm.taobao.org   // cnpm 的大多命令跟 npm 的是一致的,比如安装,卸载这些 yarn 和 npm 改源大法   //使用 nrm 模块 : www.npmjs.com/package/nrm npm config : npm config set registry https://registry.npm.taobao.org yarn config : yarn config set registry https://registry.npm.taobao.org

2.can’t not find ‘xxModule’ - 找不到某些依赖或者模块

  　　这种情况一般报错信息可以看到是哪个包抛出的信息.，一般卸载这个模块,安装重新安装下即可.

3.data functions should return an object

 　　这个问题是 vue 实例内,单组件的data必须返回一个对象;如下

?

1 2 3 4 5 6 7 8 9 10 11 12 13

export default {   name: 'page-router-view',       data () {       return {         tabs: [           {             title: '财务信息',             url: '/userinfo'           }         ]       }     } }

为什么要 return 一个数据对象呢? 官方解释如下: data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！简言之,组件复用下,不会造成数据同时指向一处,造出牵一发而动全身的破问题...

4.在函数内用了this.xxx=,为什么抛出Cannot set property ‘xxx’ of undefined

　　这又是this的套路了..this是和当前运行的上下文绑定的... ,一般你在axios或者其他 promise , 或者setInterval 这些默认都是指向最外层的全局钩子,简单点说:"最外层的上下文就是 window,vue内则是 Vue 对象而不是实例!"; 

解决方案: 

　　a.暂存法: 函数内先缓存 this , let that = this;(let是 es6, es5用 var) 
　　b.箭头函数: 会强行关联当前运行区域为 this 的上下文; 

5.为什么我的引入的小图片渲染出来却是 data:image/png;base64xxxxxxxx

　　这个是 webpack 里面的对应插件处理的，对于小于多少 K 以下的图片(规定的格式)直接转为 base64格式渲染; 

具体配置在webpack.base.conf.js里面的rules里面的 url-loader，这样做的好处:在网速不好的时候先于内容加载和减少http的请求次数来减少网站服务器的负担。

6.Component template shold contain exactly one root element.If you are useing v-if on multiple elements , xxxxx

　　大体就是说,单组件渲染 DOM 区域必须要有一个根元素,不能出现同级元素. 可以用v-if和v-else-if指令来控制其他元素达到并存的状态。

换个直白的解释,就是有一个唯一的父类,包裹者; 比如一个 div(父包含块) 内部多少个同级或者嵌套都行,但是最外层元素不能出现同级元素!

7.路由模式改为history后,除了首次启动首页没报错,刷新访问路由都报错

　　必须给对应的服务端配置查询的主页面..也可以认为是主路由入口的引导

8.TypeError: xxx is not a function

　　基本是写法问题

9.Error in render function:”Type Error: Cannot read property ‘xxx’ of undefined”

　　这种问题大多都是初始化的姿势不对;比如引入echart这些...仔细去了解下生命周期,再来具体初始化;

vue 组件有时候也会(嵌套组件或者 props传递初始化)..也是基本这个问题

10.Unexpected token: operator xxxxx

　　语法错误啊，基本都是符号问题， 一般报错会给出哪一行或者哪个组件。