关于前端vue框架项目环境搭建-node-sass & Python &Vscode&node-gyp

一个爱玩的社畜开发程序媛

已于 2024-10-23 16:37:27 修改

阅读量1.7k

点赞数 55

分类专栏：环境配置前端文章标签：前端 vue.js javascript node.js

于 2024-10-23 16:15:27 首次发布

本文链接：https://blog.csdn.net/amily_lisa/article/details/143105682

版权

环境配置同时被 2 个专栏收录

2 篇文章

订阅专栏

前端

1 篇文章

订阅专栏

方式二下载python依赖（可能描述不太准确，反正就是一个集成python）

异常4：gyp 异常

异常5： VsCode异常

方式一下载VsCode软件

方式二下载VsCode依赖（可能描述不太准确，反正就是一个集成VsCode）

一.安装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 i

3、工具缺失解决方案

参考文档：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博客

异常2：sass 报错

参考文档

可以先试一下这个语句

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

如果不行的话按照原文说得那样下载node-sass指定的版本

而我下载的node版本14.21.3 对应的node-sass版本是6.1.1

npm install node-sass@^6.1.1 --registry=https://npmmirror.com

文档中还说了一种就是连接超时导致报错的配置，但这种本媛没有遇到

解决方法原文说得是添加下载二进制文件流配置

npm install node-sass@^6.1.1 --registry=https://npmmirror.com --sass_binary_site=https://npmmirror.com/mirrors/node-sass/

异常3：python报错

当时第一反应前端还挺强大的，居然还会使用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_mirror=https://npmmirror.com/mirrors/python/ install --global windows-build-tools

如果存在卡着进度条的时候可以去环境变量配置一下

参考文档 npm install --global --production windows-build-tools卡在Successfully installed Python 2.7不动-CSDN博客

异常4：gyp 异常

可能会存在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

异常7：syscall rename异常

方案一：系统用户角色权限不够

参考文档：解决报错npm ERR! code EPERMnpm ERR! syscall open-CSDN博客

可能使用的命令

npm cache clean --force

注意也可以把你自己当前登录的系统用户也加入放权

方案二 : 配置可能没有更新到位

原文参考解决npm i 报错显示 code EPERM syscall rename等问题 - 樹恱人生 - 博客园

npm install nrm -g

异常6：vue-cli 脚手架异常

本媛第一次加载，所以根本没有安装脚手架

原文参考：安装 Vue-CLI 详细方法及踩坑记录_npm install vue-cli -g-CSDN博客

vue-cli指定版本安装_vue-cli-service 选哪个版本-CSDN博客

vue卸载：npm uninstall vue-cli -g（3.0以下版本卸载）
npm uninstall -g @vue/cli（3.0以上版本卸载）
vue安装：npm install -g @vue/cli （安装的是最新版）
npm install vue-cli@2.9.6 （指定版本安装【指定版本为3.0以下版本】，其中2.9.6为版本号）
npm install -g @vue/cli@3.11.0（指定版本安装【指定版本为3.0以上版本】，其中3.11.0为版本号）

npm install -g @vue/cli

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

三.总结

这些是本媛由于客观原因在一个月内反复配置三次前端环境（三台不同电脑）所遇到的问题回顾，值得重点一提的是，前端环境配置特别在意的是版本对应。所以版本选择上，需要慎重！基本上的报错都可能是版本问题，在每次重新加载依赖之前，保险起见，删除项目中的node-modules文件夹，同时执行一下清除缓存命令（来自前端友友邓邓的友好提示）