前端vue项目遇到的问题01——那些初级问题

前端vue项目遇到的问题01------那些初级问题

[1. npm install 问题](#1. npm install 问题)
- [1.1 依赖冲突](#1.1 依赖冲突)
- - [1.1.1 详细问题](#1.1.1 详细问题)
  - [1.1.2 报错原因](#1.1.2 报错原因)
  - [1.1.3 解决问题](#1.1.3 解决问题)
  - - [1.1.3.1 方式1------无视冲突](#1.1.3.1 方式1——无视冲突)
    - [1.1.3.1 方式2------更换依赖版本](#1.1.3.1 方式2——更换依赖版本)
- [1.2 nodejs版本问题](#1.2 nodejs版本问题)
- [1.3 node版本正确的情况（audit问题）（这个好像无视版本错误时可能会有）](#1.3 node版本正确的情况（audit问题）（这个好像无视版本错误时可能会有）)
- [1.4 ValidationError: Invalid options object.报错（这个好像无视版本错误时可能会有）](#1.4 ValidationError: Invalid options object.报错（这个好像无视版本错误时可能会有）)
- [1.5 随意切换镜像地址进行 install](#1.5 随意切换镜像地址进行 install)
[2. 内存问题](#2. 内存问题)
- [2.1 npm run dev 内存溢出](#2.1 npm run dev 内存溢出)

1. npm install 问题

1.1 依赖冲突

1.1.1 详细问题

如下：

bash 复制代码

npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/element-ui
npm ERR!   element-ui@"2.13.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer element-ui@">=2.15.3" from @smallwei/[email protected]

1.1.2 报错原因

报错原因：
在新版本的npm中，默认情况下，npm install遇到冲突的peerDependencies时将失败。
看错误提示信息：
根据上面的提示信息，可知有两种解决办法，请继续......

1.1.3 解决问题

1.1.3.1 方式1------无视冲突

这个吧，个人不建议使用，因为这次无视之后install成功了，后面还有别的幺蛾子出现，所以不妨直接用对版本，非要这么解决的话，那你看吧！
无视冲突，解决办法：

使用 - -force 或 --legacy-peer-deps可解决这种情况。

--force 会无视冲突，并强制获取远端npm库资源，当有资源冲突时覆盖掉原先的版本。

--legacy-peer-deps：安装时忽略所有peerDependencies，忽视依赖冲突，采用npm版本4到版本6的样式去安装依赖，已有的依赖不会覆盖。

建议用--legacy-peer-deps 比较保险一点

在终端重新安装即可解决
bash 复制代码
```
npm install --legacy-peer-deps
```

1.1.3.1 方式2------更换依赖版本

在 package.json 文件中修改报错时提示的建议版本，如下：

1.2 nodejs版本问题

根据提示信息，考虑更好一下nodejs版本，以防后续各种幺蛾子出现！
关于Mac上安装多版本的node，可以看下面的文章，其他系统自行处理：
Mac上安装多版本nodejs 并随意切换node版本.

1.3 node版本正确的情况（audit问题）（这个好像无视版本错误时可能会有）

如果nodejs版本已经和原先代码开发、打包用的版本一致了，还有其他类似下面的问题，如下：
bash 复制代码
```
found 8 vulnerabilities (6 moderate, 2 high)
  run `npm audit fix` to fix them, or `npm audit` for details
```
解决办法：
- 先，删除 node_modules 目录和 package-lock.json文件
- 然后，重新执行以下指令，问题即可解决
  bash 复制代码
```
npm install --no-fund --no-audit
```

1.4 ValidationError: Invalid options object.报错（这个好像无视版本错误时可能会有）

错误信息如下：

bash 复制代码

 ERROR  ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
         - options has an unknown property 'disableHostCheck'. These properties are valid:
           object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }

解决问题：
把 vue.config.js 文件中的 disableHostCheck: true 配置注释掉，如下：

1.5 随意切换镜像地址进行 install

关于 install 慢的问题，可以下载淘宝镜像，但时不时又想使用nrm或其他镜像地址，那么请安装nrm工具进行管理，关于nrm以及随意切换镜像地址的，请看下面的文章：
npm常用命令 + 前端常用的包管理工具以及 npm淘宝镜像配置等.

2. 内存问题

2.1 npm run dev 内存溢出

问题描述（windows下遇到的问题）：
错误代码解释：

错误码 errno 3221225725 是 Windows 操作系统下的一个错误码，对应的错误信息是 STATUS_HEAP_CORRUPTION，通常是由于堆栈损坏导致的程序崩溃。堆栈损坏可以是内存泄漏、指针越界、释放已释放的内存等原因导致的。

如果你遇到了这个错误码，可以考虑以下几种解决方法：
- 检查代码中是否有内存泄漏、指针越界、释放已释放的内存等问题。
- 使用工具检测和修复堆栈问题，比如Windows自带的调试工具WinDbg。
- 更新操作系统和相关软件，确保已经安装了最新的补丁和更新。
解决问题：修改项目node内存配置大小，然后重新npm run dev即可，如下：

找到package.json文件，修改node --max_old_space_size配置选项的大小（这个是M单位），如下：