前端常见的小问题快速解决懒人指南

前言

本文档整理出在一年以来本人开发过程中可能出现的问题以及可能能快速解决的方案懒人手册。收集、整理、查阅资料 -by MMR

问题汇总

Q1：安装超时(install timeout)

解决方案：换源大法

npm config : npm config set registry https://registry.npm.taobao.org

yarn config : yarn config set registry https://registry.npm.taobao.org

Q2: can't not find 'xxModule' - 找不到某些依赖或者模块

解决方法：对症下药

多半是依赖包丢失了，这种情况一般报错信息可以看到是哪个包抛出的信息，一般卸载这个模块,安装重新安装下即可。实在不行就直接把node_modules整个删除后清除缓存，重新安装依赖即可。

Q3：在函数内用了this.xxx=,抛出Cannot set property 'xxx' of undefined;

解决方法：这又是this的套路了,this是和当前运行的上下文绑定的,

一般你在axios或者其他 promise , 或者setInterval 这些默认都是指向最外层的全局钩子.

简单点说:“最外层的上下文就是 window,vue内则是 Vue 对象而不是实例!”;

解决方案:

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

Q4： 跨域问题

比如No 'Access-Control-Allow-Origin' header is present on the requested resource.

解决问题：反向代理

1: CORS , 前后端都要对应去配置,IE10+ 2: nginx 反向代理,一劳永逸 <-- 线上环境可以用这个

线下开发模式,比如你用了vue-cli, 里面的 webpack 有引入了proxyTable这么个玩意, 也可以做接口反向代理

Q5：我想拦截页面,或者在页面进来之前做一些事情

各种路由器的钩子：传送门: 导航守卫

记忆滚动的位置也可以做到。

Q6：跨级拿到props

解决方法：可以用$attrs 或者inject + provide来实现。

Q7： Uncaught ReferenceError: xxx is not define

• 实例内的 data 对应的变量没有声明
• 导入模块报这个错误肯定是导出没写好

Q8：Error in render function:"Type Error: Cannot read property 'xxx' of undefined"

初始化问题，在vue项目中嵌套组件用props组件传值也会出现这类问题

解决方案：查看文档解决初始化问题。

Q9：Unexpected token: operator xxxxx

语法问题，具体看哪行报错。

Q10：Unexpected tab charater

eslint问题，直接把vscode里的eslint插件禁用了，或者把webpack里的eslint配置项直接删了。

Q11：Failed to mount component: template or render function not defined

组件挂载失败问题，组件没有正确引入或挂载点顺序错了。

Q12：Unknown custom element: <xxx> - did you register the component correctly?

组件没有正确引入或者正确使用,依次确认

1. 导入对应的组件
2. 在 components 内声明
3. 在 dom 区域声明标签

Q13：Invalid prop: type check failed for prop "xxx". Expected Boolean, got String.

这种问题一般就是组件内的 props 类型已经设置了接受的范围类型, 而你传递的值却又不是它需要的类型。

Q14：Module not found: Error : Can't resolve 'xxx-loader' in xxxx

webpack的配置文件你改动了或对应的loader 没有装上

Q15：Error in event handler for "click":"xxx"

事件触发了. 但是组件内部缺少对应的实现或者变量,所以抛出事件错误.

Q16：ERROR in static/js/xxxxxxx.js from UglifyJs

引入的 js,是直接引入压缩版本后的 js(xxx.min.js); 然后 webpack 内又启用了 UglifyJs(压缩 JS的), 二重压缩大多都会报错。

解决方案:引入标准未压缩的 JS

Q17:Uncaught TypeError : Cannot set property xxx which has only a getter

这个问题就是你要操作的属性只允许 getter,不允许 setter;

Q18: CSS预编译语言的差异（新开项目的选择）

写法有些差异:

• scss: 写法上是向 css 靠齐
• sass : 其实也就是 scss , 只是写法不一样,靠的是缩进
• less : 跟 css 基本靠齐
• stylus : 一样,靠缩进,跟pug(Jade)一样

使用环境的差异:

• scss 可以借助 ruby 或者 node-sass或者dart-sass 编译
• less 可以用 less.js 或者对应的 loader 解析
• stylus 只能借助 loader 解析,它的出现就是基于 node 的

Q19：Failed to compile with x errors : This dependency was not found !

编译错误,对应的依赖没找到。

解决如下:

• 知道缺少对应的模块,直接装进去。
• 若是一个你已经安装的大模块(比如 axios)里面的子模块(依赖包)出了问题,卸载重装整个大模块，补全不一定有用。

Q20：SyntaxError: Unexpected identifier

语法错误，建议自己检查代码。

Q21：package.json里面的dependencies 和devDependencies的差异

dependencies : 存放线上或者业务能访问的核心代码模块,比如 vue,vue-router;

devDependencies: 处于开发模式下所依赖的开发模块,也许只是用来解析代码,转义代码,但是不产生额外的代码到生产环境, 比如什么babel-core这些。

Q22：the "scope" attribute for scoped slots replaced by "slot-scope" since 2.5

在vue2.5+的项目中，提示就是 scope 现在要用 slot-scope 来代替, 但是 scope 暂时可以用，目前还没有完全的规范。

Q23：遇事不决直接百度