前言
在前端开发中，Vue.js是一种流行的JavaScript框架，而Vue CLI是Vue.js的官方脚手架工具，用于快速搭建Vue.js项目。然而，在使用Vue CLI进行安装的过程中，有时会遇到各种问题，本篇文章将记录我在安装Vue CLI过程中遇到的问题以及解决方案，希望能够帮助到其他同志。 😀
为了更贴合生产环境（大多数是Linux系统）我选择了Git Bash作为操作终端，这样可以直接使用Linux指令进行操作，不过Windows自带的PowerShell同样可以执行大部分的Linux指令大家根据喜好自行选择就好； 😋
首先，我们确保电脑已经正确安装配置了Node.js（前置条件），如果没有下载安装可以直接前往官网下载：https://nodejs.org/zh-cn 选择TLS稳定版本即可，由于本篇文章主要解决Vue-CLI的安装问题，因此node.js具体安装中的选项等此处不赘述，有疑问可以在网上查阅其他优秀博主的文章。
问题复现——终端使用npm指令安装无响应/失败
确保安装好Node.js后我们可以在终端输入 node -v 检查是否成功返回node.js版本号，成功返回则表示安装配置成功。
接下来我们使用npm指令（npm在安装Node.js的时候就会默认安装）进行Vue-cli的全局安装，使用以下指令：
npm install -g @vue/cli接下来发现Git Bash终端长时间无响应/进度变化，初步猜测npm官方源无法正常连通，果断切换到其他国内镜像，使用以下指令切换npm默认源：
设置源：
npm config set registry http://mirrors.cloud.tencent.com/npm/
验证当前使用的源：
npm config get registry
另外附常用优秀镜像地址：
npm官方原始镜像：https://registry.npmjs.org
淘宝 NPM 镜像：https://registry.npmmirror.com
阿里云 NPM 镜像：https://npm.aliyun.com
腾讯云 NPM 镜像：https://mirrors.cloud.tencent.com/npm
华为云 NPM 镜像：https://mirrors.huaweicloud.com/repository/npm
网易 NPM 镜像：https://mirrors.163.com/npm
中科院大学开源镜像站：http://mirrors.ustc.edu.cn
清华大学开源镜像站：https://mirrors.tuna.tsinghua.edu.cn发现切换源后再次执行vue-cli安装指令报错，提示没找到这个目标，去浏览器检查了这几个源站发现镜像源基本都没有vue-cli，同时意外发现npm官方源其实可以访问，再次尝试使用npm安装指令，依然无效 😥 ：
$ npm install vue-cil@2.9.x -g
npm ERR! code ECONNRESET
npm ERR! syscall read
npm ERR! errno ECONNRESET
npm ERR! network request to https://registry.npmjs.org/vue-cil failed, reason: read ECONNRESET
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly. See: 'npm help config'
npm ERR! A complete log of this run can be found in: C:\xxxxxx\npm-cache\_logs\2024-09-05T01_52_19_802Z-debug-0.log
猜测是npm官方源中的下载地址无法连通， 😂 果断放弃npm方案，之前偶然了解到cnpm是一个npm的替代方案，指令和npm一样但是更好用，尝试通过cnpm解决。
使用CNPM替代NPM执行
首先通过npm安装cnpm，这个各大镜像都有同步，大家选一个访问速度还行的就行，这里我使用了阿里源：
npm install -g cnpm -registry=http://registry.npmmirror.com成功安装：
added 1 package in 25s使用 cnpm -v 检查是否成功安装：
$ cnpm -v
cnpm@9.4.0 (D:\xxx\v21.7.0\node_modules\cnpm\lib\parse_argv.js)
npm@9.9.2 (D:\xxx\v21.7.0\node_modules\cnpm\node_modules\npm\index.js)
node@21.7.0 (C:\Program Files\nodejs\node.exe)
npminstall@7.12.0 (D:\xxx\v21.7.0\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=C:\Program Files\nodejs
win32 x64 10.0.19045
registry=https://registry.npmmirror.com发现成功输出，说明cnpm安装成功，接下来就可以使用cnpm替代npm指令进行操作了，同样我们直接全局安装vue-cli，仅需将之前的指令中的npm替换成cnpm即可：
cnpm install -g @vue/cli接下来会下载大约35个mod并完成安装，等待安装完成后我们进入我们的项目目录执行下面的命令构建一个新的Vue项目 😃 （注意项目名字母只能小写）：
vue create demo01过程中需要按几次yes/回车，最后成功创建：
(node:43144) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
? Your connection to the default yarn registry seems to be slow.
? Your connection to the default yarn registry seems to be slow.
Use https://registry.npmmirror.com for faster installation? Yes
? Please pick a preset: (Use arrow keys)
? Please pick a preset: Default ([Vue 3] babel, eslint)
? Pick the package manager to use when installing dependencies: (Use arrow keys)
? Pick the package manager to use when installing dependencies: Yarn
✨ Creating project in E:\CodeProject\HTML\VueDemo\Test01\demo01.
🗃 Initializing git repository...
⚙️ Installing CLI plugins. This might take a while...
yarn install v1.22.22
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 28.14s.
🚀 Invoking generators...
📦 Installing additional dependencies...
yarn install v1.22.22
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 8.00s.
⚓ Running completion hooks...
📄 Generating README.md...
🎉 Successfully created project demo01.
👉 Get started with the following commands:
$ cd demo01
$ yarn serve
使用指令进入项目目录并启动项目：
#进入项目目录
cd demo01
#启动项目服务
cnpm run serve启动后即可通过本地8080端口访问（默认） 😊 ：
> demo01@0.1.0 serve
> vue-cli-service serve
INFO Starting development server...
DONE Compiled successfully in 7089ms13:52:53
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.0.xxx:8080/
Note that the development build is not optimized.
To create a production build, run yarn build.
使用浏览器打开地址：
通过以上解决方法，我们成功解决了在安装Vue CLI时遇到的网络连接问题，顺利完成了安装过程。在前端开发中，遇到问题是很常见的，关键在于如何找到并解决问题。希望这篇博客能够帮助到其他朋友；
以上就是我在安装Vue CLI过程中遇到的问题及解决方案的记录。如果你有类似问题或其他技术困惑，欢迎留言交流讨论。您还可以通过微信公众号“NianSir年先生”交流学习更多~感谢支持！
评论 (0)