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调试插件使用就可以了
三、解决方法
关闭开发者工具，然后刷新登录页面，再点击按钮即可。

4. 问题：75% advanced module optimization 这里变的很慢

解决方法：
解决方式一：

1. 安装

npm install babel-plugin-dynamic-import-node --save-dev

在.babelrc 文件中
在“env"中添加

 "development": {
      "plugins": ["dynamic-import-node"]
    }

这种方式
router/index.js 动态引用，path为/的，会报错。

  {
  path: '/',
    name: 'home',
    title: '首页',
    component: () =>
      import ('@/views/Home'),
      }

报错如下

解决方式二：
1.安装
npm install babel-plugin-dynamic-import-webpack --save-dev
2.在.babelrc 文件中
在“env"中添加

"development": {
      "plugins": ["dynamic-import-webpack"]
    }