Vue常见报错及解决方案-一一网

1、’webpack-dev-server’ 不是内部或外部命令，也不是可运行的程序或批处理文件

解决办法：
现在使用webpack要同时安装webpack-cli这个包，才可以调用webpack和webpack-dev-server这些命令。
cnpm install webpack webpack-dev-server webpack-cli –save-dev

2、”export ‘default’ (imported as ‘ol’) was not found in ‘ol’ （黄色警告，但是不可忽略，会导致组件无法正常引用而不能使用）

解决办法：
导入方式改为： import * as G2 from ‘@antv/g2’
原因：动态组件无法识别第三方插件的引用，需要使用import * as 方法进行重命名

3、报“TypeError: that.$refs.videoItem.getBoundingClientRect is not a function“在使用ref获取节点位置的时候报错

解决办法：
件 .$refs 拿到的是VueComponent，加个.$el就能拿到了
let itemH= this.$refs.videoItem.$el.getBoundingClientRect().top;

拿不到$ref,报undefine的时候：

检查节点是否使用了v-if或者v-show，如果初始化时节点并没有被渲染出来，那么是获取不到$ref的
是否在页面还没有渲染完成就获取$refs，此时应该写在mounted函数中，如果还是获取不到，则应该使用this.$nextTick(()=>{})

4、vue项目中node_modules删除之后install报错

解决方案：
1.删除node_modules文件
2.清理缓存 npm cache clean –force
3.重新安装 npm install

npm install说明：

npm install=npm i。在git clone项目的时候，项目文件中并没有 node_modules文件夹，项目的依赖文件可能很大。直接执行，npm会根据package.json配置文件中的依赖配置下载安装。
-global=-g，全局安装，安装后的包位于系统预设目录下
--save=-S，安装的包将写入package.json里面的dependencies，dependencies：生产环境需要依赖的库
--save-dev=-D，安装的包将写入packege.json里面的devDependencies，devdependencies：只有开发环境下需要依赖的库

5、打包成dist文件以后，index.html加载空白

没有修改config配置文件，直接打包，系统默认的是’/’（根目录），而不是’./’（当前目录）,从而导致路径不对，页面加载不出来。
针对vue-cli3.0以下版本的可以直接将config/index.js文件的assetsPublicPath: ‘/’;改为assetsPublicPath: ‘./’; 然后再重新打包一次就可以了。

image.png

对于vue-cli3.0及以上版本没有config配置文件的。需要自己在项目的根目录下手动建一个配置文件并添上以下代码：然后在重新打包一次就可以了。

module.exports = {
publicPath: './'
}
复制代码

经过上面一番操作后，我点击导航栏它是这个样子的：

百度得知是我开发时路由的方式选的不同，才导致这样。

vue-router总共有三种模式：blog.csdn.net/lcj529/arti…这篇博客里面讲了这三种路由方式。

具体解决办法：将router中的index.js 中的mode: “history”注释掉，然后再重新打包即可。

6、Module build failed (from ./node_modules/image-webpack-loader/index.js):Error: Cannot find module ‘gifsicle

这是由于webpack-image-loader没有完全拉取下来：
webpack-image-loader依赖的四个图片处理库都需要拉取bin文件

“dependencies”: {
“imagemin-gifsicle”: “^5.1.0”,
“imagemin-mozjpeg”: “^6.0.0”,
“imagemin-pngquant”: “^5.0.0”,
“imagemin-svgo”: “^5.2.1”,
},
解决办法：
需要cnpm install webpack-image-loader 就能将 gifsicle 下载下来

7、Eslint 报错：Type of the default value for ‘data’ prop must be a function

在写形如prop: {type: Array; default: []}的代码时,eslint常会出现这样的错误提示,
翻译: prop的默认值data必须是一个函数
解决办法：
修改方式1
props: {arr: {type: Array,default: function () { return [] }}}

修改方式2(es6)
props: {
arr: {
type: Array,
default: () => [] // es6的箭头函数
}
}