JS
xxx is not defined
问题说明
想要使用某个变量, 但是报错了
错误示例代码
<!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>xxx is not defined</title>
</head>
<body>
<script>
var arr = [1, 5, 3, 2, 10];
Arr.push(100);
</script>
</body>
</html>
代码报错截图
分析解决
Uncaught ReferenceError: Arr is not defined
Uncaugh：未捕获
ReferenceError 引用错误
Arr is not defined：Arr是没有定义的
回去看第14行代码, 发现没有找到Arr这个变量定义的地方, 所以代码给你报错了 回去代码里找找发现, 变量名叫arr改正即可
正确示例代码
<!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>xxx is not defined</title>
</head>
<body>
<script>
var arr = [1, 5, 3, 2, 10];
arr.push(100);
</script>
</body>
</html>
总结
变量名声明后, 以后使用的时候也可以直接复制使用
一定要知道每个变量里的值是什么
cannot set innerHTML
问题说明
获取标签并设置内容未成功
错误代码示例
<!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>cannot set innerHTML</title>
</head>
<body>
<p id="myP"></p>
<script>
document.querySelector('#mpy').innerHTML = '你好啊, p标签'
</script>
</body>
</html>
代码报错截图
分析解决
Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
Uncaught 未捕获
TypeError 类型错误
Cannot 不能
Set 设置
properties 属性
of null 属于空
setting 'innerHTML' 设置innerHTML
报错截图说在index.html第14行
第14行代码, 有null值在设置innerHTML,innerHTML左侧表达式是document.querySelector('#mpy') 它用于获取标签, 证明没获取到
document等单词没错, 发现是id名字写错了, 改成为myP即可
正确示例代码
<!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>cannot set innerHTML</title>
</head>
<body>
<p id="myP"></p>
<script>
document.querySelector('#myp').innerHTML = '你好啊, p标签'
</script>
</body>
</html>
总结
报错多看提示里的关键词
顺藤摸瓜找原因
单词写完以后使用尽量复制
Cannot read properties of undefined reading xxxx
问题说明
想要遍历数组里每个值, 但是报错了
错误示例代码
<!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>Cannot_read_properties_of_undefined_reading_xxxx</title>
</head>
<body>
<script>
let res = {
data: ['春天', '夏天', '秋天', '冬天']
}
res.date.forEach(el => {
console.log(el);
})
</script>
</body>
</html>
报错截图
分析解决
Uncaught TypeError: Cannot read properties of undefined (reading 'forEach')
Uncaught 未捕获
TypeError 类型错误
Cannot 不能
Read 获取
properties 属性
of undefined 属于undefined
Reading “forEach” 读取foreach
且报错内容在index.html的第14行
意为undefined无法用来读取forEach，也就是forEach左侧表达式的内容为undefined
仔细看发现res里的是data, 而不是date, 修改后即可
正确代码
<!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>Cannot_read_properties_of_undefined_reading_xxxx</title>
</head>
<body>
<script>
let res = {
data: ['春天', '夏天', '秋天', '冬天']
}
res.data.forEach(el => {
console.log(el);
})
</script>
</body>
</html>
总结
有时候单词很相近, 所以可以双击一个看看另外一个亮不亮
如果亮是同一个单词, 否则不是同一个单词
foreach is not a function
问题说明
想要遍历数组里每个值, 但是报错了
示例错误代码
<!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>xxx.foreach_is_not_a_function</title>
</head>
<body>
<script>
let arr = [1, 2, 3];
arr.foreach(val => {
console.log(val);
})
</script>
</body>
</html>
代码报错截图
分析解决
Uncaught TypeError: arr.foreach is not a function
Uncaught 未捕获
TypeError 类型错误
arr.foreach is not a function：arr.foreach 不是一个方法
报错截图说在index.html第14行
回去看第14行代码, 打印和观察arr变量有值肯定没错, 那问题就是foreach了
查文档和看以前代码发现单词错误, 应该是大写E (forEach), 修改后即可
正确代码
<!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>xxx.foreach_is_not_a_function</title>
</head>
<body>
<script>
let arr = [1, 2, 3];
arr.forEach(val => {
console.log(val);
})
</script>
</body>
</html>
总结
JS是一门区分大小写的脚本语言
所以foreach和forEach是2个方法
而数组里只有forEach方法
Failed to execute append on FormData 2 arguments required but only 1 present
问题说明
选择文件后, 点击上传图片按钮报错
错误代码示例
<!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>Failed_to_execute_append_on_FormData_2_arguments_required_but_only_1_present</title>
</head>
<body>
<div>
<span>请选择要上传的图片</span>
<input type="file" id="myFile">
<br>
<button onclick="clickFn()">点击尝试上传</button>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function clickFn() {
var fileObj = $("#myFile")[0].files[0];
var fd = new FormData();
fd.append(fileObj);
// 这里省略了ajax请求代码(可以自己找个上传文件的接口尝试)
// 主要问题在上面3行代码
}
</script>
</body>
</html>
代码报错截图
分析解决
Uncaught TypeError: Failed to execute 'append' on 'FormData': 2 arguments required, but only 1 present.
Uncaught 未捕获
TypeError 类型错误
Failed to execute 处理失败
'append' on 'FormData' apend方法在用于FormData时，
2 arguments required 两个参数时必须的
but only 1 present：但是当前只有一个
而且报错截图说在index.html第24行
回去看第24行代码, 根据错误提示append方法必须有2个参数, 但是只给了1个
查询append使用文档: developer.mozilla.org/zh-CN/docs/…
知道了append第一个参数是给后台的参数名, 第二个参数是要带给后台的值
假设后台要求的参数名是'img', 所以第一个位置携带即可
正确代码
<!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>Failed_to_execute_append_on_FormData_2_arguments_required_but_only_1_present</title>
</head>
<body>
<div>
<span>请选择要上传的图片</span>
<input type="file" id="myFile">
<br>
<button onclick="clickFn()">点击尝试上传</button>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function clickFn() {
var fileObj = $("#myFile")[0].files[0];
var fd = new FormData();
fd.append('img', fileObj);
// 这里省略了ajax请求代码(可以自己找个上传文件的接口尝试)
// 主要问题在上面3行代码
}
</script>
</body>
</html>
总结
在使用一些新方法的时候, 要多去看文档对方法使用的解释
Cannot read properties of undefined (reading '0')
问题说明
想要获取对象里数组某个元素值, 但是报错了
示例错误代码
<!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>Uncaught TypeError: Cannot read properties of undefined (reading '0')</title>
</head>
<body>
<script>
let obj = {
arr: ['老李', '老刘', '小可爱']
}
let result = obj.brr[0]
console.log(result);
</script>
</body>
</html>
报错截图
分析解决
Uncaught TypeError: Cannot read properties of undefined (reading '0')
Uncaught 未捕获
TypeError 类型错误
Cannot 不能
Read 获取
properties 属性
of undefined (reading '0') 属于 undefined 读 '0'
报错截图说在index.html第17行
看17行代码, 发现obj对了, 但是obj内属性叫arr, 而他写的是brr属性找不到所以undefined了, 然后undefined[0]就报错了
把brr换成arr即可解决问题
正确代码
<!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>Uncaught TypeError: Cannot read properties of undefined (reading '0')</title>
</head>
<body>
<script>
let obj = {
arr: ['老李', '老刘', '小可爱']
}
let result = obj.arr[0]
console.log(result);
</script>
</body>
</html>
总结
undefined和null都不能访问任何的属性, 一旦访问直接报错并阻止代码往下继续运行
Vue
Conflict: Multiple assets emit different content to the same filename index.html
问题说明
刚创建项目想要运行，结果报错了
报错截图
分析解决
通过百度第三行关键词语, 查找到别人也遇到过类似错误
因为项目所在判断路径上有特殊符号, 去掉即可解决
总结
在创建项目文件夹和文件等的时候，不要出现特殊符号和括号，尽量用英文名
Property "xxx" was accessed during render but is not defined on instance
问题说明
点击让计数器加一不好用了
错误示例代码
<template>
<p>{{ count }}</p>
<hr>
<button @click="addFn">点击计数+1</button>
</template>
<script>
import { ref } from 'vue'
export default {
name: 'App',
setup () {
const count = ref(0)
const addFn = () => {
count.value++
}
return { addFn }
}
}
</script>
报错截图
分析解决
Property "count" was accessed during render but is not defined on instance. at
Property 属性
"count" was accessed during render： "count" 是访问在期间渲染
but is not defined on instance 但是没有定义在实例，在 组件
根据截图里面的话语提示说在App组件里count没有定义
但是在setup函数中又确实定义了
但是setup函数中想要被上面的访问的话，需要在最后return对象里面配置上，发现忘记配置了，所以return{}内加上count即可
正确代码
<template>
<p>{{ count }}</p>
<hr>
<button @click="addFn">点击计数+1</button>
</template>
<script>
import { ref } from 'vue'
export default {
name: 'App',
setup () {
const count = ref(0)
const addFn = () => {
count.value++
}
return { count, addFn }
}
}
</script>
总结
setup函数内变量和函数要在template内使用，需要return{}对象内配置或者在script标签上添加setup语法糖
No match found for location with path "/"
问题说明
新创建项目，清空模板后，报了个警告
报错截图
分析解决
[Vue Router warn]: No match found for location with path "/"
[Vue Router 警告]: 没有 匹配 发现 为 本地 和 路径 "/"
去看router/index.js里的路由规则数组什么都没有所以报了这个警告
解决方案：以后配置了路由规则，就会自然消失
总结
多去看英文的提示找到关键信息去针对解决
Module not found: Error: Can't resolve 'axios'
问题说明
想用axios请求接口,但是终端里报错了
报错截图
分析解决
Module not found: Error: Can't resolve 'axios'
Module not found:没有找到模块
Error: Can't resolve 'axios'：错误：不能引入axios
分析：JS代码无法引入axios, 没有找到axios
所以去package.json里确定了, 此项目还没有下载axios所以代码找不到报错了
解决: 就是npm i axios 下载axios包到当前项目下即可解决
总结
代码在向你求助, 它说它找不到某个包, 那你就需要帮代码下载下来才能让代码正常运行
Invalid watch source: 0 A watch source can only be a getter/effect function
问题说明
想要watch侦听某个响应式对象, 但是报警告且不好用
报错截图
分析解决
Invalid watch source: 0 A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.
Invalid watch source：无效的侦听资源
0 A watch source can only be a getter/effect function，a ref, a reactive object, or an array of these types. ：一个侦听资源仅仅可以是一个 getter/effect 函数, 一个ref或者reactive独享，或者一个数组，属于这些类型
截图和里面的英文提示说明，watch只能够去侦听getter或者effect函数，或者ref和reactive对象，或者数组等，不能够侦听到0
再回看代码，发现vue3中需要吧基础类型进行ref函数的包装转化成一个响应式的对象，这样数据改变，使用此变量相关的地方才会更新
因此，引入ref函数等，把需要监听的0的变化包裹起来即可
总结
Vue3里定义变量需要用ref/reactive函数包装成响应式对象使用
Invalid prop: type check failed for prop "price". Expected Number with value 100, got String with value "100"
问题说明
父组件给子组件传值, 报了警告, 但是不影响使用
报错截图
分析解决
Invalid prop: type check failed for prop "price". Expected Number with value 100, got String with value "100"
Invalid prop:非法的属性
type check failed for prop "price"：属性“price”的类型检查失败
Expected Number with value 100：需求是数字类型的数值100
got String with value "100"：但是当前是是字符串的值100
根据警告英文提示，即为子组件的price属性类型检查失败了，他希望是数字类型，但是他接受到的是一个字符串
知识点：在标签上默认传入的都是字符串类型（不单单只看值是100），还同时需要考虑类型
解决：Vue中在标签属性前面加上：（即v-bind的简写），可以把后面的转成表达式（也就是数字表达式100值，也就是数字类型了）
总结
Vue中标签属性加了冒号修饰之后，后面不再单纯的是字符串，而是当做表达式来解析
表达式：原地有结果的一段代码
例如
- 这个时候count是字符串'count'
- 这个时候count是变量, 需要定义count才能使用传值
构建工具
node -gyp问题
问题说明
项目无法正常跑起来，报这种错误
分析解决
本机node版本过高，项目创建是在一个低版本node环境下创建并使用node-sass这个包的，所以要降级自己电脑的node版本
建议：可以全局下载nvm包得到nvm命令，快速切换node版本
附：nvm下载和使用方法
1. NVM下载
安装包地址：github.com/coreybutler… windows系统下载nvm-setup.zip安装包
2. NVM安装
如果电脑上之前已经单独安装了node，先卸载删除（原先的环境变量也不需要了可以删除），然后解压nvm-setup.zip安装包，进入解压的文件夹，双击exe后缀文件进行安装：
选择nvm的安装路径：
选择nodejs的快捷方式路径（这里一定得是空文件夹或者不创建这个文件夹，因为nvm会自动创建这个文件夹为快捷方式）：
下一步后确认安装即可
验证： 安装完成后查看环境变量会发现新增了NVM_HOME(nvm安装路径)和NVM_SYMLINK(nvm自动创建的nodejs文件夹的快捷方式路径)，如下图：
在命令行窗口输入nvm后有如下图信息证明安装成功：
3.nvm使用
注意：nvm在切换node版本时需要系统的管理员权限，所以需要以管理员身份打开命令行窗口！！！
1. 设置nvm环境
nvm默认会从github下载npm，可能会有网络问题，所以最好设置为淘宝镜像。nvm的配置也很简单，可以采用命令方式，在shell中执行：
nvm node_mirror https://npm.taobao.org/mirrors/node/
nvm npm_mirror https://npm.taobao.org/mirrors/npm/
或者 直接修改配置文件（在nvm安装路径下的settings.txt），如下图：
2.安装nodejs
直接命令行执行（v6.9.4可以替换为需要安装的版本，此处仅做示例）：
nvm install v6.9.4
1
执行nvm list查看效果如下：
3.使用或切换node版本
nvm use 6.9.4
效果如下：
这时你会发现原先指定的E:/dev/nodejs目录变成了快捷方式，并且指向了E:/dev/nvm下安装的nodejs目录，如下图：
4.建议
通过npm安装的全局node_modules应该统一放在一个文件夹 所以建议设置npm的全局参数：
npm config set prefix E:\dev\nvm\npm
npm config set cache E:\dev\nvm\npm\node_cache
Tips:记得把设置的prefix目录加到系统环境变量的PATH变量内
效果如下：
5.nvm命令总结
nvm arch ：显示node是运行在32位还是64位。
nvm install [arch] ：安装node， version是特定版本也可以是最新稳定版本latest。可选参数arch指定安装32位还是64位版本，默认是系统位数。可以添加–insecure绕过远程服务器的SSL。
nvm list [available] ：显示已安装的列表。可选参数available，显示可安装的所有版本。list可简化为ls。
nvm on ：开启node.js版本管理。
nvm off ：关闭node.js版本管理。
nvm proxy [url] ：设置下载代理。不加可选参数url，显示当前代理。将url设置为none则移除代理。
nvm node_mirror [url] ：设置node镜像。默认是nodejs.org/dist/。如果不写u…
nvm npm_mirror [url] ：设置npm镜像。github.com/npm/cli/arc…
nvm uninstall ：卸载指定版本node。
nvm use [version] [arch] ：使用制定版本node。可指定32/64位。
nvm root [path] ：设置存储不同版本node的目录。如果未设置，默认使用当前目录。
nvm version ：显示nvm版本。version可简化为v。
总结
问百度快一些，问题很常见
