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、打包成dist文件以后，index.html加载空白
没有修改config配置文件，直接打包，系统默认的是’/’（根目录），而不是’./’（当前目录）,从而导致路径不对，页面加载不出来。
针对vue-cli3.0以下版本的可以直接将config/index.js文件的assetsPublicPath: ‘/’;改为assetsPublicPath: ‘./’; 然后再重新打包一次就可以了。
对于vue-cli3.0及以上版本没有config配置文件的。需要自己在项目的根目录下手动建一个配置文件并添上以下代码：然后在重新打包一次就可以了。
module.exports = {
publicPath: './'
}
经过上面一番操作后，我点击导航栏它是这个样子的：
百度得知是我开发时路由的方式选的不同，才导致这样。
vue-router总共有三种模式：https://blog.csdn.net/lcj529/article/details/108740607这篇博客里面讲了这三种路由方式。
具体解决办法：将router中的index.js 中的mode: "history"注释掉，然后再重新打包即可。
5、Vue.js前台报Uncaught (in promise) cancel错误解决办法
this.$confirm方法内置promise方法，所以不能把.catch()去掉（因为取消操作时，无法捕获）
解决办法：
在this.$confirm方法后加上.catch方法即可，注意要写上空方法体，我第一次没写没去掉
del: function (pageId) {
this.$confirm('您确认删除吗?', '提示', {}).then(() => {
//调用服务端接口
cmsApi.page_del(pageId).then(res => {
if (res.success) {
this.$message.success("删除成功")
//刷新页面 this.query()
} else {
this.$message.error("删除失败")
} }) }).catch(()=>{
}); //注意这里，这里是重点！！！
}
6、关于vue打包后，访问不到页面和访问不到图片
vue项目完成打包上线的时候很多人都会碰到静态资源找不到，常见的有两个
第一种：js，css路径不对
解决办法：打开config/index.js，将其中的assetsPublicPath值改为’./’
第二种：css中引用的图片资源找不到
我的项目文件中有一段css，其中引用了一个背景图片
“src/assets/”文件夹下有这张图片，打包后路径发生变化这个图片就找不到了，解决办法：
打开“build/utils.js”，增加一行代码即可
7、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 下载下来
8、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的箭头函数
}
}
9、ReferenceError: _ is not defined
解决办法：
1、 npm install underscore --save
2、在 自己的组件内 引入 import _ from "underscore"
10、Eslint : Expected error to be handled
这是因为回调函数里面的参数error没有运用到
解决办法：
所以可以不设置参数，或者在回调函数内console.log(error)
11、npm install 报错解决(To install them, you can run: npm install --save core-js/modules/es6.array）
解决办法：
cnpm install core-js@2
12、Browserslist: caniuse-lite is outdated. Please run next command npm update
解决办法：
cnpm update caniuse-lite
删了node_modules/caniuse-lite和node_modules/browserslist两个文件夹
cnpm i --save-dev caniuse-lite browserslist
12、npm run serve报错
Error loading C:\Users\30414\Desktop\work\jiuwei_cloud\artemis-plus\ vue.config.js:
ERROR ValidationError: Invalid options object. Ignore Plugin has been initialized using an options object that does not match the API schema.
- options should be one of these:
object { resourceRegExp, contextRegExp?} | object { checkResource }
Details:- options misses the property 'resourceRegExp'. Should be:
RegExp
-> A RegExp to test the request against. - options misses the property 'checkResource'. Should be:
function
-> A filter function for resource and context.
- options misses the property 'resourceRegExp'. Should be:
解决办法：
vue.config.js：
configureWebpack: {
plugins: [
// Ignore all locale files of moment.js
// new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// 修改为这样：
new webpack.IgnorePlugin({
resourceRegExp: /^\.\/locale$/,
contextRegExp: /moment$/,
}),
createThemeColorReplacerPlugin(),
],
},
参考博客：
https://www.cnblogs.com/wangyfax/p/12289636.html
https://blog.csdn.net/weixin_43267006/article/details/105440882
https://www.cnblogs.com/blueball/p/11328259.html
