Vue项目常见问题处理

开发环境推荐使用node 14版本，可以尽可能的减少版本兼容导致的问题。

基础环境

如果是国内网络环境建议提前设置镜像服务器（梯子可略），以下是三种方案：

1、只针对当前项目，在项目根目录创建.npmrc文件，写入内容：

registry=https://registry.npmmirror.com

2、全局设置源服务器命令：

npm config set registry https://registry.npmmirror.com

3、使用cnpm：

npm install -g cnpm --registry=https://registry.npmmirror.com 

大部分安装依赖包错误是编译环境不完整引起的，请确保编译环境安装完整（以管理员身份运行cmd）：

npm install --global --production --verbose windows-build-tools

npm install -g node-gyp

安装依赖报错

“node-pre-gyp ERR!”错误

在使用“npm i”依赖的时候容易出现的问题，例如使用到canvas依赖包的时候，换用“cnpm i”可以解决。

另一个解决方案在.npmrc文件中加入依赖包的镜像地址，例如canvas的镜像：

canvas_binary_host_mirror=https://registry.npmmirror.com/-/binary/canvas

打包、运行报错

node版本与node-saas版本不匹配

大多数的“Failed to resolve loader: cache-loader”错误的原因是node、node-saas、saas-loader版本不匹配导致的，根据下表对应关系调整package.json中的版本配置(或者根据package.json中的配置切换对应的node版本)，然后重新安装依赖。

Node、node-saas版本对应关系参考

NodeJS	Supported node-sass version	Node Module
Node 20	9.0+	115
Node 19	8.0+	111
Node 18	8.0+	108
Node 17	7.0+, <8.0	102
Node 16	6.0+	93
Node 15	5.0+, <7.0	88
Node 14	4.14+, <9.0	83
Node 13	4.13+, <5.0	79
Node 12	4.12+, <8.0	72
Node 11	4.10+, <5.0	67
Node 10	4.9+, <6.0	64
Node 8	4.5.3+, <5.0	57
Node <8	<5.0	<57

查看项目中saas-loader版本匹配信息

npm view sass-loader peerDependencies

 

saas-loader版本配置差异

saas-loader 9.x及以上 的版本需要修改配置，vue.config.js文件中有关saas的配置：prependData 替换为 additionalData。