idea启动前端vue项目（各种坑）

最新推荐文章于 2025-06-09 19:11:16 发布
原创 最新推荐文章于 2025-06-09 19:11:16 发布 · 9.3k 阅读 · 36 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文记录了在IDEA中安装Vue项目依赖时遇到的各种问题及解决方法，包括npm命令未找到、依赖安装失败、启动服务报错等，并提供了解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在idea中安装vue插件
在这里插入图片描述
搜索不到vue的可以看这个解决方案

安装成功重启idea
点击Treminal 输入命令安装依赖初始化：

npm install

出现npm不是内部或外部命令
在这里插入图片描述
解决方案：
在这里插入图片描述

C:\Windows\System32\WindowsPowerShell\v1.0\powershell.exe

重启idea
运行命令：npm install
出现错误：npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。 所在位置 行:1 字符: 1
关闭idea，使用管理员打开idea
重新输入命令，可以正常安装了
在这里插入图片描述

强烈建议不要用直接使用 cnpm 安装，会有各种诡异的 bug，可以通过重新指定 registry 来解决 npm 安装速度慢的问题。

npm install --registry=https://registry.npm.taobao.org

安装完成启动服务：

npm run serve

启动报错
‘vue-cli-service’ 不是内部或外部命令，也不是可运行的程序
网上很多人说让重新install
运行 ：npm install
才发现原来报错了：Run npm audit for details.
解决方案：
检测项目依赖中的漏洞并自动安装需要更新的有漏洞的依赖，而不必再自己进行跟踪和修复。
在这里插入图片描述

npm audit fix

npm audit fix –force

npm audit

执行完在 npm run dev 进行启动
启动报错：Error: Cannot find module ‘compression-webpack-plugin’
在这里插入图片描述
解决办法：安装低版本的这个插件

npm install --save-dev compression-webpack-plugin@1.1.12

不好使哇
更新项目的依赖包

npm update

更新也报错
npm降级

npm install npm@5.0.0 -g

报错了，删除nodejs目录下的npx和npm，
在这里插入图片描述
还是不可以，这些解决方案都不适合我
可能是我安装了最新版的node有什么不兼容的问题吧，于是我就卸载了，
安装了个10版本的node
卸载，下载安装链接：https://blog.youkuaiyun.com/YXWik/article/details/110053469
安装成功之后再次测试
进入项目继续npm install
在这里插入图片描述
好吧总有新的报错
在这里插入图片描述
尝试方法一：
删除npmrc文件。
在C:\Users{账户}\下的.npmrc文件。
在这里插入图片描述
尝试方法二 ：

进入项目目录，把node_modules，package-lock.json删除
以管理员身份运行CMD
cd到项目目录，清除npm缓存：

 npm cache clean --force

然后再进行npm install
本来准备清除完成就输入 npm install进行安装的
结果在清除完成后idea右下角小弹框提示了 npm install 自动安装依赖
于是点击npm install 抱着尝试的态度等待
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
好吧，又有报错了
在这里插入图片描述
npm ERR! gifsicle@5.1.0 postinstall: node lib/install.js 应该是安装失败了
解决办法：更换数据源

npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

在这里插入图片描述
又出现修复
在这里插入图片描述
那就运行修复命令进行修复
修复报错
在这里插入图片描述
输入 npm install 重新安装
报错 ：× Error: Command failed: C:\WINDOWS\system32\cmd.exe /s /c “autoreconf -ivf”
在这里插入图片描述
解决方案：使用cnmp install
在这里插入图片描述
先安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

在这里插入图片描述
然后运行 cnpm install

出现报错：cnpm : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
在这里插入图片描述
解决方案：以管理员身份运行 power shell
在这里插入图片描述
输入：

set-ExecutionPolicy RemoteSigned

回车
再输入：A
回车

在这里插入图片描述
然后回到项目下，重新输入 cnpm install
在这里插入图片描述
完成后，
输入： cnpm start
报错：npm ERR! missing script: start

在这里插入图片描述
换成输入： npm run dev 启动项目
在这里插入图片描述
可算成功了

vue项目 启动失败报错（实用的解决方法）
前端程序员、项目经理、人工智能博主
10-31 5599
第一种报错如下 解决办法： 直接项目目录下运行npm install webpack-dev-server -g 第二种常见报错如下 如果我们遇到像Error: Cannot find module '***'的报错 我们可以直接项目目录下npm install 报错提示的***去进行下载 示例报错如下： 解决办法: 讲解完毕 ...
vue idea启动快速设置
康世行
07-07 797
在命令行中输入npm install -g cnpm --registry=http://registry.npm.taobao.org然后等待安装，安装完成之后，我们就可以用cnpm代替npm来安装。安装完成之后，打开命令行工具,输入node -v如果出现版本号，则说明安装成功，npm包管理器是集成在node中的，所以，直接。好了，node环境已经安装成功，由于有些npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，所以还需要安装npm的国内镜像----cnpm。
IDEA启动vue项目
weixin_42174815的博客
08-01 1万+
写在文章之前 不要使用 import 去引入项目，因为不是传统的项目结构 这样打不开，直接使用open 打开文件夹即可。 一、在IDEA中配置vue插件 点击File–>Settings–>Plugins–>搜索vue.js插件进行安装，下面的图中我已经安装好了 二、搭建node.js环境 安装node.js 可以去官网下载：安装过程就很简单，直接下一步就行 测试是否安装成功：要使用管理员方式打开命令行cmd 输入 node -v 如果出现版本号，则说明安装成功，npm包管理器是集
IDEA运行VUE项目报错相关
最新发布
东方
06-09 1216
C:\Users\Lenovo\Desktop\大模型评课代码\chatai-vue>npm error A complete log of this run can be found in: C:\Users\Lenovo\AppData\Local\npm-cache_logs\2025-06-09T10_41_12_741Z-debug-0.log。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。
idea启动vue项目
热门推荐
qq_42376171的博客
05-05 1万+
idea启动vue项目 因为之前用惯了idea，然后启动前端项目，也想使用idea，就探索了一下 用idea打开vue项目 有以下几个步骤 1）给idea安装vue的插件 2）给vue项目安装依赖 3）添加自启动便捷方式 1）给idea安装vue的插件（已有vue插件的，可跳过此步骤） file–>settings–>plugins 搜索vue，点击安装上，会提示重启idea，重启就行了。 2）给vue项目安装依赖 点击idea，下方的Terminal，输入npm install，给项目安装
IDEA启动VUE前端项目
东风麦芽糖
07-23 1万+
win10安装node.js idea配置node.js idea启动前端VUE项目 vue项目启动打包
idea运行vue项目
CatEatApple的专栏
07-19 2686
File - Settings - Languages&Frameworks - JavaScript：修改JavaScript language version为ECMAScript 6，确认 File - Settings - Plugins：搜索vue，安装Vue.js Run - Edit Configurations...：点击加号，选择npm，Name为Run，packa...
vue项目的启动、idea启动vue项目、idea运行vue项目、以及vue项目页面跳转逻辑、跳转vue项目页面逻辑.doc
08-29
### Vue项目的启动与IDEA配置 #### 一、Vue项目的启动 启动Vue项目通常涉及到几个步骤，首先是确保本地环境已安装必要的工具，如Node.js，接着是通过命令行或者集成开发环境（IDE）来启动项目。 1. **安装Node.js*...
IDEA配置vue项目前后端一键启动
m0_60416689的博客
01-11 2067
idea配置vue项目一键启动
Idea创建vue项目
Jeremy486的博客
01-17 3618
点击locoal就可以跳转了。
IDEA导入Vue前端项目
u010312671的专栏
04-28 1万+
前言 最近接手一个前后端分离的项目。前端是使用vue，然后我配置了node.js环境后，使用IDEA把该vue项目导入，因为也是第一次导入vue项目，所以项目如何启动，以及报错如何处理，瓜瓜我记录下。 操作步骤 1.IDEA中导入（File->Open…），如下图: 2.启动项目设置: 3.启动后出现以下错误: 解决方式:当看到这个问题，别慌，新手必经啊。 如上图，执行完cnpm...
VUE——IDEA 启动前端工程VS文件启动前端工程
chenjianghhua的博客
12-30 6114
启动已有的vue前端项目
idea启动vue项目npm run dev启动失败
weixin_53618357的博客
11-13 2389
使用命令 npm run dev 启动项目报了下面的错误，最主要的还是没有找到package.json这个文件。
Vue项目工程的介绍及使用IDEA启动Vue工程
LxyingINGing的博客
10-22 754
vue项目里的一些配置,可以配置端口、跨域等等。main.js:所有配置的入口,可以导入项目所需要的包,然后组合在一起。1.用IDEA打开vue框架，编写代码，点击open，导入项目即可。src.assets:可以放一些logo、图片、自定义样式啥的。public:放静态文件的地方,比如html、静态图标等等。src.router:定义路由,每个路由对应一个页面。App.vue:所有页面的入口。src.views:视图文件。2.Vue项目工程的介绍。src:项目的源码目录。
使用Idea搭建vue前端项目
weixin_42408447的博客
01-16 1万+
前言 【1】安装node.js，配置好环境变量，并指向taobao镜像地址 【2】安装Vue-cli3 【3】vue create 项目名称 【4】vue add element (添加 element，一个 element 风格的 UI 框架) 【5】npm install axios (安装 axios，用于网络请求) 【6】npm install vuex --save(安装 Vuex，用于管理状态) 【7】npm install vue-router (安装 路由，用于实现两个 Vue 页面的跳转
零基础如何使用IDEA启动前后端分离中的前端项目（Vue）？
程序源的博客
08-24 1万+
零基础如何使用IDEA启动前后端分离中的前端项目（Vue）？
使用idea和vecode创建vue项目并启动（超详细）
le12345678934694的博客
10-09 5453
创建项目之前先下载好插件新建项目找到vue生成器写好名称，找到自己需要存放的地址，node解释器安装方式可以看我上一个博客，vueCLI是选择vue的版本，我们可以使用idea自带的vue版本默认是vue3，创建速度会很快，这是一个简洁版本，也可以选择自己下载好的vue版本。加载完后，项目就创建好了，idea创建项目非常的简单易懂，我给大家展示一下默认idea自带的vue和下载的区别创建项目非常迅速端口号（默认）：5173版本是3.x启动项目速度非常快创建项目需要加载资源。
解决IDEA的Terminal运行npm run dev失败的问题
Chloe__的博客
02-16 6700
在运行npm run dev失败了两次 第一次报错里提示没有找到package.json，查看了项目test_01_vue项目里的test_01_vue文件有没有package.json。我这里的原因是就因为vue在初始化项目时有些设置出错了，文件里确实没有package.json。 重新创建vue项目后如下重新初始化： 成功后就有package.json，如下： 完成后输入npm run dev仍然报错，不过是另一个原因 参考了各种解决方法后的结论： 原因是你的node_modules有意外改动，
idea的前端vue项目实践
01-17
### 使用 IntelliJ IDEA 开发 Vue.js 前端项目 #### 创建 Vue 项目 在开始之前，确保已安装 Node.js 和 npm。创建一个新的 Vue 项目可以通过 Vue CLI 工具完成。打开终端并执行命令 `npm install -g @vue/cli` 来全局安装 Vue CLI[^2]。 ```bash vue create my-project-name ``` 这会启动交互式的项目配置向导，允许选择预设或手动挑选特性来定制化新项目结构[^1]。 #### 安装必要的插件和支持工具 对于更高效的开发流程，在 IntelliJ IDEA 中可以利用官方提供的 Vue 插件增强编辑器的功能。通过设置菜单进入插件市场搜索 "Vue.js" 并点击安装按钮即可获取最新版本的支持包[^3]。 #### 配置 Webpack 或 Vite 构建工具 现代前端应用通常依赖构建工具来进行模块打包、资源优化等工作。默认情况下，Vue CLI 自动生成的项目已经包含了 Webpack 的基础配置；而对于追求更快编译速度的应用，则可以选择切换到 Vite 起手模板： ```json // package.json { ... "scripts": { "serve": "vite", "build": "vite build" } } ``` #### 设置 API 请求处理机制 为了让前端能够顺利调用后端接口，需引入 Axios 库负责 HTTP 请求发送任务。同样地，可通过 npm 方式快速加入此库至项目之中： ```javascript import axios from 'axios'; export default function useApi() { const apiClient = axios.create({ baseURL: '/api', // 后端服务地址 withCredentials: false, headers: { Accept: 'application/json', 'Content-Type': 'application/json' }, }); return apiClient; } ``` 以上代码片段展示了如何定义一个简单的 API 客户端实例用于发起请求操作。 #### 实现前后端联调测试 当完成了上述准备工作之后，便可以在本地环境中模拟真实场景下前后端之间的协作过程。确保两者运行在同一台机器上或是网络可达的情况下，调整好跨域资源共享(CORS)策略以便顺利完成通信握手动作。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值