VUE常见问题汇总
目录
3、Missing binding node_modules/node-sass/vendor/darwin-x64-72/binding.node
5、webstorm Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本
6、 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
7、This is probably not a problem with npm. There is likely additional logging output above.
8、启动vue项目，警告提示browserslist@latest --update-db
9、This is probably not a problem with npm. There is likely additional logging output above.
10、在VUE3+WebPack >5开发时遇到Module not found: Error: Can’t resolve ‘crypto’错误
12、npm ERR! Maximum call stack size exceeded
1、80端口占用问题
sudo lsof -n -P | grep :802、sass版本安装问题
https://github.com/sass/node-sass/releases
node@14.3.0
node-sass@4.14.1
sass-loader@7.3.1
| NodeJS | Supported node-sass version | Node Module |
| Node 17 | 7.0+ | 102 |
| Node 16 | 6.0+ | 93 |
| Node 15 | 5.0+, | 88 |
| Node 14 | 4.14+ | 83 |
| Node 13 | 4.13+, | 79 |
| Node 12 | 4.12+, | 72 |
| Node 11 | 4.10+, | 67 |
| Node 10 | 4.9+, | 64 |
| Node 8 | 4.5.3+, | 57 |
| Node |
npm uninstall node-sass
npm uninstall sass-loader
npm install sass-loader@^6.0.1 node-sass@^10.2.0 --save-dev //安装对应的版本3、Missing binding node_modules/node-sass/vendor/darwin-x64-72/binding.node
找到node-sass链接，进入url：https://github.com/sass/node-sass/releases
.../node_modules/node-sass/vendor目录下新建目录 darwin-x64-72，将下载的文件放在此目录下，并更名为binding.node
或者使用以下淘宝镜像
npm install node-sass@4.14.1 --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/4、Downloading binary from https://github.com/sass/node-sass/releases/download/v4.14.1/win32-x64-83_binding.node Cannot download "https://github.com/sass/node-sass/releases/download/v4.14.1/win32-x64-83_binding.node":
binding.node下载后放到 node_modules\node-sass\vendor\win32-x64-83 目录下
5、webstorm Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本
转到“开始”菜单，然后搜索“ Windows PowerShell ISE”。 右键单击x86版本，然后选择“以管理员身份运行”。
在顶部，粘贴Set-ExecutionPolicy RemoteSigned ； 运行脚本。 选择“全是”。
对64位版本的Powershell ISE（非x86版本）也重复这些步骤。
6、 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
在执行npm install 可能报错如下错误：
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
经查询发现，fsevent是mac系统的，在win或者Linux下使用了，所以会有警告，忽略即可。fsevent的作用是能够检测文件目录的修改，可以记录恶意软件的非法操作，获取恶意软件的完整路径，删除和修改日期。
7、This is probably not a problem with npm. There is likely additional logging output above.
如果出现这种报错情况，需要重新安装 node_modules 文件夹中的内容 但是在安装前，要把之前的内容都清空掉
由于npm install之后，会记录信息，把之前装的删除
rm -rf node_modules
rm package-lock.json
npm cache clear --force
npm install8、启动vue项目，警告提示browserslist@latest --update-db
浏览器列表：caniuse lite已经过时。 这是一个警告，不是错误，不影响你项目的运行。
你不管它，也没关系，现在咱们说的是怎么去掉它。
看，package.json文件，里面有Browserslist这一项
browserslist做什么用的？
根据提供的目标浏览器的环境来，智能添加css前缀。
只要package.json配置了browserslist对象,需要的组件将自动匹配到并使用。
执行：npx browserslist@latest --update-db
9、This is probably not a problem with npm. There is likely additional logging output above.
删除 node_modules 文件夹
删除 package-lock.json 文件
npm cache clean --force
npm install
10、在VUE3+WebPack >5开发时遇到Module not found: Error: Can’t resolve ‘crypto’错误
原因是由于在webpack5中移除了nodejs核心模块的polyfill自动引入，所以需要手动引入
npm install node-polyfill-webpack-plugin const NodePolyfillPlugin = require('node-polyfill-webpack-plugin') module.exports = defineConfig({ configureWebpack: { plugins: [new NodePolyfillPlugin()] } })
11、No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.
在vue项目的vue.config.js 中配置网络请求代理，代码如下：
devServer: {
proxy: {
'/api': { // 匹配所有以 /api 开头的请求路径
target: 'url',//指定代理的目标服务器地址，即后端服务的实际地址。
pathRewrite:{
'^/api':'' //将请求地址中的/api替换为空字符
},
changeOrigin: true
}
}
}网络请求代理原理：
一个项目可以分为三个部分，浏览器，前端服务器，后端服务器。浏览器首先会向前端服务器发出请求，拿到页面，然后再向后端发出请求，拿到数据填充到页面中。但是由于浏览器的同源策略，当浏览器向再向后端发出请求时，就会报错。
网络请求代理的原理是，在前端服务器中设置一个网络代理，如下图，当浏览器发出以 api 开头的请求时，可以认为是请求后端的数据，否则是请求页面。 当请求后端的数据时，就在前端服务中设置一个访问后端的目标url，这个url访问到数据后，响应给浏览器，这样浏览器就只需要和前端服务器进行交互，间接避免了浏览器的同源策略。
12、npm ERR! Maximum call stack size exceeded
错误的原因，npm版本问题；
解决办法：
1 更新到最新版本：npm install npm -g 要记住全局更新
2 回退版本：npm install -g npm@5.4.0
原文地址：https://blog.csdn.net/shimiso/article/details/144444860
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！