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

目次
目次
一.安装npm
1、nvm 下载安装
2、nvm 环境设置
3、nvm 下载 node
二.环境编译
1、设置镜像地址
2、加载依赖
3、工具缺失解决方案
4、运行
三.非常记录
非常1：树非常（补充未测试）
非常2：sass 报错
非常3：python报错
方式一 下载python 软件
方式二 下载python依赖（可能描述不太准确，反正就是一个集成python）
非常4：gyp 非常
非常5： VsCode非常
 方式一 下载VsCode软件
方式二 下载VsCode依赖（可能描述不太准确，反正就是一个集成VsCode）
非常6：syscall rename非常
方案一：体系用户角色权限不够
方案二 : 设置可能没有更新到位
非常7：vue-cli 脚手架非常
三.总结

---

---

一.安装npm

        前端友友给我推荐了nvm(npm 的包管理器，可以直接切换版本)，要是你下载的npm版本不对，你还要 卸载重新安装，你直接下个 nvm 可以不消卸载  直接在里面切换版本
        参考文档 nvm安装与使用-CSDN博客
1、nvm 下载安装

        地址 Release v1.1.12 · coreybutler/nvm-windows · GitHub

        安装建议别放c盘，然后留意安装nodeJs的目次
2、nvm 环境设置

        在你安装的目次修改设置文件(setting.txt)，原文的镜像是不可以用的，淘宝镜像已经换了，如下

1. root: D:\Java\Nvm
2. path: D:\Java\NodeJs
3. node_mirror: https://npmmirror.com/mirrors/node/
4. npm_mirror: https://npmmirror.com/mirrors/npm/

复制代码

        接着打开控制台 使用

1. nvm -v

复制代码

        如果你得不能出现版本号，说无法识别nvm时，这时候你就需要设置高级环境变量

1. NVM_HOME D:\Java\Nvm
2. NVM_SYMLINK  D:\Java\NodeJs
3. Path 在后面加上 ;%NVM_HOME%;%NVM_SYMLINK%;

复制代码

3、nvm 下载 node

        接着重启cmd管理者模式  查询可远程安装的node 版本

1. nvm list available

复制代码

        使用下载下令 nvm install 版本号（之前有看见文章说下载需要从低版本下载到高版本，如果先下载高版本，你又想下载低版本，可能使用会报错，但是不知真假）

1. nvm install  14.21.3

复制代码

        等待下载好之后使用版本号

1. nvm use 14.21.3

复制代码

        其他原文的下令我并没有怎么用到

二.环境编译

          1、设置镜像地址

        如果你们公司有自己的镜像库，你就使用如下下令切换一下

1. npm config set registry  镜像地址

复制代码

          2、加载依赖

        找到vue项目文件夹，建议管理员模式下令行到文件路径，下载依赖

1. npm i

复制代码

          3、工具缺失解决方案

        参考文档：npm 安装windows-build-tools_npm windows-build-tools-CSDN博客
          4、运行

1. npm run serve

复制代码

        如若运行后给出了控制台编译告诫报错可暂时忽略，打开运行网址一般可正常调试

三.非常记录

非常1：树非常（补充未测试）

该博主振宇i-CSDN博客分享说 逼迫无视版本下载依赖

1. npm install --legacy-peer-deps

复制代码

原文参考 npm install xxxx --legacy-peer-deps下令是什么？为什么可以解决下载时候产生的依赖辩说呢？-CSDN博客
非常2：sass 报错

        参考文档

        可以先试一下这个语句

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

复制代码

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

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

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

复制代码

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

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

1. npm install node-sass@^6.1.1 --registry=https://npmmirror.com
2. --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）

        通过如下两种模式

1. npm install --global --production windows-build-tools
2. cnpm install --global --production windows-build-tools

复制代码

        如若不行就加上指定参数

1. 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）

        通过如下两种模式

1. npm install --global --production windows-build-tools
2. cnpm install --global --production windows-build-tools

复制代码

        如若不行就加上指定参数 vs2017 版本

1. npm i -g windows-build-tools --vs2017

复制代码

非常7：syscall rename非常

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

        参考文档：解决报错npm ERR! code EPERMnpm ERR! syscall open-CSDN博客
        可能使用的下令 

1. npm cache clean --force

复制代码

        留意也可以把你自己当前登录的体系用户也加入放权
方案二 : 设置可能没有更新到位

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

1. 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为版本号）

1. npm install -g @vue/cli

复制代码

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

复制代码

三.总结

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

1. npm cache clean --force

复制代码

        其次是淘宝镜像的缘故起因，一定留意淘宝镜像已经发生改变 npmmirror 镜像站，该替换的替换，如果无效时，可去修改.npmrc 还找不到解决方式，就考虑一下使用cnpm，本媛就是npm和cnpm共同使用的

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。