idea启动前端vue项目(各种坑)

9 篇文章 0 订阅

在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.csdn.net/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 启动项目
在这里插入图片描述
可算成功了

  • 6
    点赞
  • 36
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
### 回答1: idea集成了Maven和Spring Boot,可以很方便地启动SpringBoot项目。 首先,在idea打开Vue项目,进入终端界面,使用命令`npm run build`打包,生成静态文件。 其次,在idea打开SpringBoot项目,右键点击项目,选择“Run As” -> “Spring Boot App”,即可启动SpringBoot项目。 如果想要在浏览器查看Vue项目,在Spring Boot的配置文件application.yml加入以下配置: ``` spring: resources: static-locations: classpath:/META-INF/resources/,classpath:/resources/, classpath:/static/, classpath:/public/,file:/path-to-vue-dist-folder/ ``` 其,`/path-to-vue-dist-folder/`是Vue项目打包后的输出目录。 启动完成后,在浏览器访问`http://localhost:8080/`即可查看Vue项目。 ### 回答2: 要启动IDEA的Spring Boot Vue项目,我们需要进行以下步骤: 第一步:导入项目项目下载并解压缩,打开IDEA,选择 File -> New -> Project from Existing Sources,选择项目的pom.xml文件,然后根据提示完成导入。 第二步:配置运行环境 在IDEA的工具栏,找到“Run configurations”,点击“Add New Configuration”,选择Spring Boot,在“Main class”选择项目的Applicaiton启动类,然后点击“Apply”保存。 第三步:运行项目 点击IDEA工具栏的“Run”按钮或者使用快捷键“Shift+F10”,就可以启动项目。等待一段时间后,就可以看到控制台输出的日志信息,代表项目已经启动成功。 第四步:访问项目 在浏览器输入http://localhost:8080,就可以访问项目了。 总结: 启动IDEA的Spring Boot Vue项目需要先导入项目并配置运行环境,然后使用IDEA工具栏的“Run”按钮或者快捷键启动项目启动成功后,可以在浏览器访问项目。 ### 回答3: 要启动IDEA的Spring Boot Vue项目,需要按照以下步骤进行: 1.打开IDEA,并导入Spring Boot Vue项目的代码。 2.找到项目的pom.xml文件,并在该文件上右键点击选择"Maven"->"Reimport",以确保所有依赖库都可以正确加载。 3.打开终端或命令行,进入项目的根目录下,输入以下命令启动Spring Boot: mvn spring-boot:run 4.启动成功后,在浏览器输入"http://localhost:8080/"即可访问应用程序。 5.如果该项目还包含Vue.js,需要安装依赖并启动Vue项目。进入项目前端文件夹,输入以下命令安装依赖: npm install 6.安装完毕后,输入以下命令启动Vue: npm run dev 7.启动成功后,在浏览器输入"http://localhost:8080/"即可访问Vue应用程序。 以上就是启动IDEA的Spring Boot Vue项目的步骤,希望对你有所帮助。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值