目录一.安装npm1、nvm 下载安装2、nvm 环境配置3、nvm 下载 node二.环境编译1、配置镜像地址2、加载依赖3、工具缺失解决方案4、运行三.异常记录异常1树异常补充未测试异常2sass 报错异常3python报错方式一 下载python 软件方式二 下载python依赖可能描述不太准确反正就是一个集成python异常4gyp 异常异常5 VsCode异常方式一 下载VsCode软件方式二 下载VsCode依赖可能描述不太准确反正就是一个集成VsCode异常6syscall rename异常方案一系统用户角色权限不够方案二 : 配置可能没有更新到位异常7vue-cli 脚手架异常三.总结一.安装npm前端友友给我推荐了nvm(npm 的包管理器可以直接切换版本)要是你下载的npm版本不对你还要 卸载重新安装你直接下个 nvm 可以不用卸载 直接在里面切换版本参考文档nvm安装与使用-CSDN博客1、nvm 下载安装地址Release v1.1.12 · coreybutler/nvm-windows · GitHub安装建议别放c盘然后注意安装nodeJs的目录2、nvm 环境配置在你安装的目录修改配置文件(setting.txt)原文的镜像是不可以用的淘宝镜像已经换了如下root: D:\Java\Nvm path: D:\Java\NodeJs node_mirror: https://npmmirror.com/mirrors/node/ npm_mirror: https://npmmirror.com/mirrors/npm/接着打开控制台 使用nvm -v如果你得不能出现版本号说无法识别nvm时这时候你就需要配置高级环境变量NVM_HOME D:\Java\Nvm NVM_SYMLINK D:\Java\NodeJs Path 在后面加上 ;%NVM_HOME%;%NVM_SYMLINK%;3、nvm 下载 node接着重启cmd管理者模式 查询可远程安装的node 版本nvm list available使用下载命令 nvm install 版本号之前有看见文章说下载需要从低版本下载到高版本如果先下载高版本你又想下载低版本可能使用会报错但是不知真假nvm install 14.21.3等待下载好之后使用版本号nvm use 14.21.3其他原文的命令我并没有怎么用到二.环境编译1、配置镜像地址如果你们公司有自己的镜像库你就使用如下命令切换一下npm config set registry 镜像地址2、加载依赖找到vue项目文件夹建议管理员模式命令行到文件路径下载依赖npm i3、工具缺失解决方案参考文档npm 安装windows-build-tools_npm windows-build-tools-CSDN博客4、运行npm run serve如若运行后给出了控制台编译警告报错可暂时忽略打开运行网址一般可正常调试三.异常记录异常1树异常补充未测试该博主振宇i-CSDN博客分享说 强制无视版本下载依赖npm install --legacy-peer-deps原文参考npm install xxxx --legacy-peer-deps命令是什么为什么可以解决下载时候产生的依赖冲突呢-CSDN博客异常2sass 报错参考文档可以先试一下这个语句npm install --registryhttps://npmmirror.com如果不行的话按照原文说得那样下载node-sass指定的版本而我下载的node版本14.21.3 对应的node-sass版本是6.1.1npm install node-sass^6.1.1 --registryhttps://npmmirror.com文档中还说了一种就是连接超时导致报错的配置但这种本媛没有遇到解决方法原文说得是添加下载二进制文件流配置npm install node-sass^6.1.1 --registryhttps://npmmirror.com --sass_binary_sitehttps://npmmirror.com/mirrors/node-sass/异常3python报错当时第一反应前端还挺强大的居然还会使用Python相关 值得注意的是一定要注意版本方式一 下载python 软件解决方式参考文档win10下安装python2.7_python-2.7.15.amd64.msi-CSDN博客下载官网链接Python Releases for Windows | Python.org方式二 下载python依赖可能描述不太准确反正就是一个集成python通过如下两种模式npm install --global --production windows-build-tools cnpm install --global --production windows-build-tools如若不行就加上指定参数npm --python_mirrorhttps://npmmirror.com/mirrors/python/ install --global windows-build-tools如果存在卡着进度条的时候可以去环境变量配置一下参考文档npm install --global --production windows-build-tools卡在Successfully installed Python 2.7不动-CSDN博客异常4gyp 异常可能会存在node-gyp相关异常参考文档node-gyp 下载 node-headers 和 node.lib 不成功-CSDN博客依旧需要注意一下版本对应先查看你的nodejs版本接着在到这个官网(Index of /download/release/)去下载按照原文下载对应的文件本媛用的是这个,项目内置了版本所以会有些可能不一样异常5 VsCode异常也是神奇没有想过会需要用c语言。同异常3一样两种方式方式一 下载VsCode软件解决方式参考文档win10下安装python2.7_python-2.7.15.amd64.msi-CSDN博客下载官网链接Visual Studio Code - Code Editing. Redefined方式二 下载VsCode依赖可能描述不太准确反正就是一个集成VsCode通过如下两种模式npm install --global --production windows-build-tools cnpm install --global --production windows-build-tools如若不行就加上指定参数 vs2017 版本npm i -g windows-build-tools --vs2017异常7syscall rename异常方案一系统用户角色权限不够参考文档解决报错npm ERR! code EPERMnpm ERR! syscall open-CSDN博客可能使用的命令npm cache clean --force注意也可以把你自己当前登录的系统用户也加入放权方案二 : 配置可能没有更新到位原文参考解决npm i 报错显示 code EPERM syscall rename等问题 - 樹恱人生 - 博客园npm install nrm -g异常6vue-cli 脚手架异常本媛第一次加载所以根本没有安装脚手架原文参考安装 Vue-CLI 详细方法及踩坑记录_npm install vue-cli -g-CSDN博客vue-cli指定版本安装_vue-cli-service 选哪个版本-CSDN博客vue卸载npm uninstall vue-cli -g3.0以下版本卸载npm uninstall -g vue/cli3.0以上版本卸载vue安装npm install -g vue/cli 安装的是最新版npm install vue-cli2.9.6 指定版本安装【指定版本为3.0以下版本】其中2.9.6为版本号npm install -g vue/cli3.11.0指定版本安装【指定版本为3.0以上版本】其中3.11.0为版本号npm install -g vue/clinpm install -g cnpm --registryhttps://npmmirror.com cnpm install -g vue/cli三.总结这些是本媛由于客观原因在一个月内反复配置三次前端环境三台不同电脑所遇到的问题回顾值得重点一提的是前端环境配置特别在意的是版本对应。所以版本选择上需要慎重基本上的报错都可能是版本问题在每次重新加载依赖之前保险起见删除项目中的node-modules文件夹同时执行一下清除缓存命令 来自前端友友邓邓的友好提示npm cache clean --force其次是淘宝镜像的原因一定注意淘宝镜像已经发生改变npmmirror 镜像站该替换的替换如果无效时可去修改.npmrc 还找不到解决方式就考虑一下使用cnpm本媛就是npm和cnpm配合使用的