配置一个vue/cli 4.5版本的环境

最新推荐文章于 2024-08-08 07:15:00 发布
原创 最新推荐文章于 2024-08-08 07:15:00 发布 · 1.8k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了如何清除旧的Node.js环境并安装支持Vue CLI@4.5的Node.js版本。步骤包括卸载Node.js，删除相关配置，设定全局依赖路径，配置npm环境变量，设置淘宝镜像，以及在管理员权限下安装Vue CLI。通过这些步骤，可以解决安装过程中的错误，确保Vue CLI的正确安装和使用。

第一步，清除所有旧环境

1.卸载nodejs。
2. 删除旧有的node配置

3.删除全局的依赖

在这里插入图片描述

第二步，安装nodejs 14.

未知必须要支持vue/cli@4.5的版本

第三步

1.配置依赖目录

配置npm在安装全局模块时的路径和缓存cache的路径
因为在执行例如npm install webpack -g等命令全局安装的时候，默认会将模块安装在C:\Users\用户名\AppData\Roaming路径下的npm和npm_cache中，不方便管理且占用C盘空间，如下图所示：

在这里插入图片描述

所以这里配置自定义的全局模块安装目录，在node.js安装目录下新建两个文件夹 node_global和node_cache，然后在cmd命令下执行如下两个命令：

npm config set prefix "D:\Program Files\nodejs\node_global"

npm config set cache "D:\Program Files\nodejs\node_cache"
2.配置全局依赖的环境变量

将相应npm的路径改为：D:\Program Files\nodejs\node_global

3.设置淘宝镜像
npm config set registry https://registry.npm.taobao.org
4.安装vue-cli
npm install -g @vue/cli

安装成功后可以查看版本号：vue -V

如果出现版本号@vue/cli 4.5.13 那么表示安装成功 （4.5.13是我当时的最新版）

可能出现的报错
npm install -g @vue/cli 安装vue脚手架报错

管理员的身份运行cmd!!!管理员的身份运行cmd!!!管理员的身份运行cmd!!!管理员的身份运行cmd!!!管理员的身份运行cmd!!!管理员的身份运行cmd!!!管理员的身份运行cmd!!!管理员的身份运行cmd!!!管理员的身份运行cmd!!!管理员的身份运行cmd!!!管理员的身份运行cmd!!!管理员的身份运行cmd!!!管理员的身份运行cmd!!!

重新安装环境的原因，是因为这个报错

git合并没有解决冲突。

在这里插入图片描述

mac电脑通过 npm 安装 @vue/cli脚手架超时问题；
梦想的追求
10-29 1414
macos 上@vue/cli脚手架的相关工具
ElementUI学习——Vue-Cli 4.5+版本创建项目以及使用Vue-router
CHENJIANLIN_的博客
07-23 867
Vue-Cli 4.5+创建项目的一些问题： 本人在学习Vue的过程中，使用的是最新的脚手架，这里主要分享一下如何main.js以及router.js的配置 查看Vue-Cli的版本： 自从Cli的版本升级之后，ElementUI也推出了对应的插件——ElementUI-Plus. 大家可以直接去查看文档进行开发 我看了很多优快云的相关文章，大部分选择了降版本处理。 安装Element-Plus #对于 vue-cli@4.5以上版本 npm install element-plus --save
Vue-cli4.5脚手架搭建项目（零基础小白都能看懂）
08-22 1398
1.安装vue-cli npm install -g @vue/cli # or yarn global add @vue/cli 安装成功后可以查看版本号：vue -V 如果出现版本号@vue/cli 4.5.13 那么表示安装成功 （4.5.13是我当时的最新版） 2.创建项目 vue create project (vue create+你的项目名称，project为我此次创建项目的项目名) 然后按下回车键，会显示以下界面，因为我之前有保存过名称为EIT的...
如何安装vue项目
qq_46387376的博客
04-09 1373
如何安装vue项目 Vue CLI 官网 2022/02/26 检查 Vue 是否安装，如果输出 vue 的版本信息，说明安装了 vue vue -v # @vue/cli 4.5.15 如果不存在 vue 命令工具，安装 vue 命令 npm install -g @vue/cli # OR yarn global add @vue/cli 通过 vue 命令，创建一个 hello-world 项目 vue create hello-world 选择 Vue 版本, 通过上下键选择 Def
安装Vue脚手架
weixin_42888638的博客
08-06 492
安装Vue脚手架
安装npm install -g @vue/cl需注意 @vue/cli 4.5.15
qq_52915322的博客
11-17 1万+
目前版本 使用 npm install -g @vue/cli 出错，能用，后面会不断有不同类型的错误。比如 安装npm i less less-loader --save 建议 使用淘宝镜像 先清除原来的 npm uninstall -g @vue/cli 安装淘宝 npm install -g cnpm --registry=https://registry.npm.taobao.org 查看淘宝镜像 cnpm -v 安装 cnpm install -g @vue/cli
安装npm install -g @vuecl需注意 @vuecli 4.5.15
m0_67403188的博客
03-06 634
目前版本 使用 npm install -g @vue/cli 出错，能用，后面会不断有不同类型的错误。比如 安装npm i less less-loader --save 建议 使用淘宝镜像 先清除原来的 npm uninstall -g @vue/cli 安装淘宝 npm install -g cnpm --registry=https://registry.npm.taobao.org 查看淘宝镜像 cnpm -v 安装 cnpm install -g @vue/cli
Vue/cli4.5版本升级采坑(2) - less-loader版本过高；引入less全局变量。
sherleysong的专栏
04-21 3681
前提：vue2.6.x 注：由于vue3.0.0 对应的mint-ui的版本无法使用，所以还是做了vue降版本处理。 this.getOptions is not a function 安装less-loader 默认版本过高导致报错 npm i less less-loader --save-dev ... + less-loader@8.1.1 + less@4.1.1 直接安装less-loader 版本过高，会导致如下问题： Syntax Error: TypeError: this.getOp
vue/cli4.5 + vue-router4.0 + element-plus 搭建后台管理系统（一）
我的个人博客
04-01 1189
前言：本教程教你从0搭建vue/cli4.5 + vue-router4.0 + elementuiPlus 后台管理系统 功能：用户管理，权限配置，图表基本功能 准备工作：请先下载安装node，node官网 npm install -g @vue/cli;//安装最新版本vue-cli脚手架 npm install --save-dev webpack //webpack 安装 //cmd 或者自己用的顺手的工具检查vue是否安装成功 vue-V //出现版本号即vue安装完成 vue...
vue3知识点8 vuecli4.5项目打包配置
yangyangdt的博客
01-26 1062
vuecli4.5版本的打包配置。
vue-cli4.5创建vue项目
05-16 695
. 准备工作 1.1 安装node.js 安装过程很简单，在官网下载安装包，点击安装，一直下一步直到安装完成即可，新版本的node.js会自动添加环境变量，不需要再手动添加环境变量，如有疑问，可自行前往环境变量查看。 node.js官网：https://nodejs.org/zh-cn/ 出现下图所示表示node安装完成。 1.2 检查安装的node.js是否成功及其版本号 进入cmd（Windows+R进入运行界面，输入cmd回车即可）窗口，在cmd窗口中输入命令： node -v
使用Vue CLI v4.5(+)搭建Vue3.0项目框架搭建
serdonty的博客
03-18 675
@[TOC](使用Vue CLI v4.5(+)搭建Vue3.0项目框架搭建) 开发环境准备 请安装以下开发工具（未详述的可在网上找相关资料） 安装vscode 安装Node.js 为npm配置国内镜像 npm config set registry https://registry.npm.taobao.org/ 配置命令执行完毕后，可用如下命令检测 npm config get registry 安装yarn npm install -g yarn 为yarn配置国内镜像 ya
安装vue脚手架@vue/cli 4.5.13(稳定版)
分享与记录前端点滴
10-09 1万+
安装vue脚手架vue/cli@3.12.1(稳定版) 最近从0搭建一个 vue 简单的 h5 页面，还记得以前自己是用 vue-cli 2.0的版本 里面有默认配置好的webpack配置，但现在很多小伙伴都已经用最新的 @vue/cli 4+ 版本了，毕竟 @vue/cli 3 以上 的版本，比 2.0 的配置文件简洁了很多，当然你还得跟上时代的脚步，不然你就被淘汰了。但自己搭建过的小伙伴都应该知道， ...
怎么查看当前vue项目，要求的node.js版本
热门推荐
还在活水泥的未来包工头
11-06 1万+
在上面的示例中，engines 属性指定了 Node.js 的最低版本为 12.0.0。这意味着，如果你想在该项目中运行 Vue CLI，你需要使用 Node.js 版本 12.0.0 或更高版本。要查看当前 Vue 项目所需的 Node.js 版本，你可以查看项目根目录下的 package.json 文件中的 engines 属性。如果你的 Node.js 版本低于项目所需版本，你需要升级 Node.js。你可以访问 Node.js 官方网站下载最新版本的 Node.js，并按照官方指南进行安装。
vue/cli 4.5.4用命令行建设新应用
互零网络科技有限公司
08-27 854
1.开始创建项目 @ vue / cli 4.5.4安装成功后，如果要在D：\ Code2Vue目录中创建demo2项目，则可以打开资源管理器，输入D：\ Code2Vue目录，然后在资源管理器中在地址栏上输入cmd（此时打开的cmd窗口的打开目录是D：\ Code2Vue目录，如下所示），在打开的cmd窗口模式下输入以下命令： 开始创建一个新项目： # demo2 是项目名称 vue creat demo2 注意：vue creat命令在哪个目录中运行，将在哪个目录中创建vue。 2.如.
Vue基础（四）：vue安装及npx @vue/clie@4.5.15 create与npx vue create创建项目的区别
欧阳方超的专栏
08-08 1352
介绍了全局和局部安装vue/cli的方式，同时介绍了npx @vue/clie@4.5.15 create与npx vue create两种命令创建vue项目的区别。
使用vue-cli4.5.x快速搭建项目
白瑕 的博客
05-29 1451
目录一、安装vue-cli二、创建项目1.生成项目文件;2.选择生成配置方式3.插件选择4.单项配置5.选择包管理工具三.VueUI修改配置附-删除已保存的配置选项总结 一、安装vue-cli npm i @vue/cli -g 二、创建项目 vue-cli会创建一个完整的项目文件夹,内部包含src等,我们仅需要cd进打算放置这个项目文件的文件夹内执行如下代码即可; 1.生成项目文件; 终端输入: vue create projectname 2.选择生成配置方式 此处选择最下面一项进行手动配置 (你
【问题解决】@vue/cli 4.5.15脚手架搭建vue2项目时引入vue-router后页面空白问题
GUANYX的博客
02-16 1307
一、问题描述 用脚手架搭建vue2项目的时候，引入vue-router之后页面变成空白。 main.js如下： import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false // //引入路由 import router from '@/router' new Vue({ router, render: h => h(App), }).$mount('#app') 开始报一系列类似
安装vue-cli
{竹子}
09-06 1557
vue-cli是什么，为什么要安装？ 回答这个问题，官方给了一句话： Standard Tooling for Vue.js Development。 是Vue.js开发的标准工具，也叫做vue的命令行。通过vue-cli可以创建vue项目等 在安装vue-cli之前，我们需要安装nodejs。 才能安装vue-cli： npm install -g @vue/cli 执行后，vue-cli会被安装在： C:\Users\Administrator\AppData\Roaming\npm 目录下。 ..
依赖树有什么问题vue-demo@0.1.0 C:\源码\Vue\139Vue3加载Element-plus\vue-demo ├─┬ @vue/cli-plugin-babel@5.0.8 │ └── @vue/cli-service@5.0.8 deduped ├─┬ @vue/cli-plugin-pwa@5.0.8 │ └── @vue/cli-service@5.0.8 deduped └─┬ @vue/cli-service@5.0.8 ├─┬ @vue/cli-plugin-router@5.0.8 │ └── @vue/cli-service@5.0.8 deduped └─┬ @vue/cli-plugin-vuex@5.0.8 └── @vue/cli-service@5.0.8 deduped
最新发布
03-20
<think>嗯，用户想排查Vue项目依赖树中的问题，特别是@vue/cli-plugin-babel、@vue/cli-plugin-pwa和@vue/cli-service的版本冲突或潜在问题。首先，我需要回忆Vue CLI项目结构以及这些插件的兼容性。 首先，Vue CLI使用semver版本控制，主版本号需要一致。比如，如果@vue/cli-service是4.x，那么其他插件也应该用4.x。用户提到的三个插件都属于核心插件，版本必须与CLI服务一致。所以第一步应该检查package.json中这些插件的版本是否匹配。 接下来，用户可能需要运行npm ls或yarn list来查看依赖树，确认是否有不同版本的Vue CLI相关包。如果有，可能需要更新或降级某些包。比如，使用npm update命令更新到兼容版本，或者手动指定版本号安装。 另外，vue-cli-service的版本可能影响整个项目的构建，如果用户升级了Vue CLI但没有更新插件，就会出问题。这时需要检查全局和本地的CLI版本是否一致，避免因为全局安装的旧版本导致本地项目使用错误版本。 还可能存在依赖冲突，比如其他第三方库依赖不同版本的babel或webpack，这时候需要查看警告信息，用npm install --force或yarn install --force覆盖，或者手动解决冲突。 用户提供的引用中提到了使用全局安装Vue CLI，所以需要确认项目本地是否安装了正确版本，避免全局和本地版本不一致的问题。比如，全局安装了最新版，但项目用的是旧版，这时候可能需要卸载全局的，或者在项目内重新安装。 另外，引用[4]提到了Jest配置，如果用户使用了测试相关的插件，可能也需要检查相关依赖是否兼容。不过用户的问题主要集中在babel、pwa和cli-service上，可能暂时不需要处理测试部分。 最后，建议用户检查Vue的官方文档，确保所有插件的版本符合要求，或者使用Vue UI可视化工具来管理依赖，这样更直观。如果问题依旧，可能需要清除node_modules和lock文件，重新安装依赖。</think>### Vue项目依赖树问题排查指南 #### 一、版本兼容性检查 1. **核心依赖关系** Vue CLI生态中`@vue/cli-service`是核心服务，`@vue/cli-plugin-*`插件必须与其主版本匹配。例如： $$ \text{@vue/cli-service@5.x} \Rightarrow \text{@vue/cli-plugin-babel@5.x} $$ 建议通过以下命令验证版本： ```bash npm list @vue/cli-service @vue/cli-plugin-babel @vue/cli-plugin-pwa ``` 2. **Vue CLI全局与本地版本冲突** 若全局安装的Vue CLI版本（如6.x）与项目本地版本（如5.x）不一致，可能导致依赖树混乱[^2]。可通过以下命令统一版本： ```bash npm uninstall -g @vue/cli # 卸载旧全局版本 npm install -g @vue/cli@5 # 安装指定版本 ``` #### 二、依赖树分析工具 1. **使用npm/yarn内置命令** ```bash npm ls --depth=5 # 显示依赖树前5层 yarn why @vue/cli-plugin-babel # 查看特定依赖来源 ``` 2. **可视化工具** 运行`vue ui`打开Vue项目管理器，通过图形界面查看依赖关系[^3]。 #### 三、常见冲突场景 | 冲突类型 | 表现示例 | 解决方案 | |---------|---------|---------| | **主版本不匹配** | `@vue/cli-service@5.0.8`与`@vue/cli-plugin-babel@4.5.19`共存 | 统一升级到5.x版本：`npm update @vue/cli-plugin-babel@5` | | **子依赖冲突** | `webpack`版本被不同插件强制锁定（如PWA插件依赖旧版） | 使用`npm install --force`或调整插件版本 | | **全局污染** | 全局安装的`vue-cli`与本地`@vue/cli`混合使用 | 彻底卸载旧版`vue-cli`：`npm uninstall -g vue-cli` | #### 四、操作示例 ```bash # 分步更新依赖 npm install @vue/cli-service@5.0.8 --save-exact npm install @vue/cli-plugin-babel@5.0.8 --save-dev npm install @vue/cli-plugin-pwa@5.0.8 --save-dev # 清理后重新安装 rm -rf node_modules package-lock.json npm install ```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值