VUE的一些常见报错

最新推荐文章于 2023-10-25 14:59:54 发布

原创最新推荐文章于 2023-10-25 14:59:54 发布 · 877 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #es6 #node.js

vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了Vue项目中遇到的四个典型问题及其解决方法，包括模块找不到、Tabbar属性修改、SASS安装失败及npm错误等问题。

1、vue报错：

webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

internal/modules/cjs/loader.js:985
throw err;
^

Error: Cannot find module 'array-includes'

原因：项目外层的目录名发生更改

解决办法：

删除项目中node_modules文件夹，

执行 npm cache clean --force 命令清除掉缓存，

cnpm install 重新安装依赖后，npm run dev 运行项目

2、vue中tabbar报错：

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "activeIndex"

父组件传值： <tabbar :activeIndex="0"></tabbar>

子组件： <van-tabbar
v-model="activeIndex"
fixed
placeholder
inactive-color="#727071"
active-color="#B58D32"
@change="onChange"
>
<van-tabbar-item>
<span>首页</span>
<template #icon="props">
<img :src="props.active==true ? icon.home_active : icon.home_inactive" />
</template>
</van-tabbar-item>

<van-tabbar-item>
<span>我的</span>
<template #icon="props">
<img :src="props.active ? icon.mine_active : icon.mine_inactive" />
</template>
</van-tabbar-item>
</van-tabbar>

子组件接受参数： props: {
activeIndex: {
type: Number,
default: 0
}
},

解决办法：在data里面重新赋值-> currentIndex: this.activeIndex,

v-modal用data里的数据：<van-tabbar v-model="currentIndex" fixed> </van-tabbar>

3、vue中安装SASS报错
操作：vue文件中<style lang="scss" ></style>使用sass报错如下

Module build failed: TypeError: this.getResolve is not a function
at Object.loader

原因：sass版本太高
解决办法：卸载npm uninstall sass-loader 重新安装： npm install sass-loader@7.3.1 --save-dev

4、vue报错
npm ERR! Maximum call stack size exceeded

错误的原因，npm版本问题；

解决办法：

　　1》更新到最新版本：npm install npm -g 要记住全局更新

　　　2》回退版本：npm install -g npm@5.4.0