Vue报错问题汇总

1.解决Vue编译和打包时频繁内存溢出情况

一、问题：
CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory

二、原因：
在Node中通过JavaScript使用内存时只能使用部分内存（64位系统：1.4 GB，32位系统：0.7 GB），这个时候，如果前端项目非常的庞大，Webpack编译时就会占用很多的系统资源，如果超出了V8引擎对Node默认的内存限制大小时，就会产生内存泄露(JavaScript heap out of memory)的错误。

三、解决方案：
既然V8引擎有对Node进行默认的内存限制大小，那么在Node内存不足的时候，可以放宽内存大小的使用限制，可以在Node启动的时候，传递–max-old-space-size 或–max-new-space-size来调整内存大小的使用限制。
但是这种方式需要所有地方都要进行设置，因此需要安装一个插件increase-memory-limit。

第一步: 全局安装 increase-memory-limit

npm install -g increase-memory-limit

第二步: 进入工程目录，执行：

increase-memory-limit

如果不行，再继续
第三步：

npm install cross-env

第四步：
在srcipt添加"fix-memory-limit": "cross-env LIMIT=2048 increase-memory-limit"

npm run fix-memory-limit

"scripts": {..."fix-memory-limit": "cross-env LIMIT=2048 increase-memory-limit"},"dependencies": {"increase-memory-limit": "^1.0.7","cross-env": "^5.2.0",...}

第五步：
关掉编辑器，重新运行，npm run dev

2.Vue 项目打包后访问报错：Uncaught TypeError: Cannot read property ‘call’ of undefined

解决办法
修改 webpack.prod.conf.js 文件如下:

chunks: ['manifest', 'vendor', pathname],
chunksSortMode: 'manual',

原因是 js 加载的顺序问题，html-webpack-plugin 插件里面有两个配置选项：

chunks:

chunks 选项的作用主要是针对多入口(entry)文件。
当你有多个入口文件的时候，对应就会生成多个编译后的 js 文件。
那么 chunks 选项就可以决定是否都使用这些生成的 js 文件。
chunks 默认会在生成的 html 文件中引用所有的 js 文件，当然你也可以指定引入哪些特定的文件。

chunksSortMode :
这个选项决定了 script 标签的引用顺序。选项：‘none’ | ‘auto’ | ‘dependency’ |‘manual’ | {function}’

• none : 不排序
• auto : 基于chunks的id进行排序
• dependency : 按照不同文件的依赖关系排序
• function : 可以指定具体排序规则
• manual 有‘手工的’意思，经过测试我猜应该是手动排序的意思，即按照 chunks配置中指定的顺序。

3.解决vue引发的报错-sub is not a function at vuex.esm.js:422:1跳转不了路由的问题

一、问题描述
当我登录使用了elementUI的vue2项目时，输入用户名密码点击确定，报如下错误。

二、原因
原因是 F12打开了开发者工具，使用Vue DevTools（Vue.js devtools beta ax 版本6.0.0 beta 20）打开Vue面板调试 报错，引起页面vue页面无法跳转，关闭vue调试插件使用就可以了
三、解决方法
关闭开发者工具，然后刷新登录页面，再点击按钮即可。