idea创建vue项目+vue与springboot连接(包含常见报错解决办法)

本文介绍了如何在SpringBoot项目中集成Vue并解决npmrundev时的webpack-dev-server和extract-text-webpack-plugin相关错误。步骤包括创建Vue项目、更新包版本和浏览器访问项目网页。

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

一、创建好一个springboot项目后,点击Terminal终端,输入vue init webpack +项目名 

可能会出现如下情况,Please run npm i -g @vue/cli-init and try again.

之后会有一些问题选择,我都是默认回车和yes。如果创建时就报错,看一下报错信息,会提供一个下载xx.zip的网站,下载好后放入错误信息提示要放入的文中,删除spring项目中的vue模块重新输入vue init webpack +项目名 就可以了

等待一会后就会出现项目创建成功的提示。我们就可以在我们的工程目录中看到vue项目的文件里目录

二、使用cd命令进入vue项目目录下后,执行 npm run dev

可能会有以下报错

项目初始化时npm run dev报错webpack-dev-server解决方法

        原因:这是新版webpack存在的BUG,卸载现有的新版本webpack,装老版本就好
webpack-dev-server 版本需要从最新版本降低到如下版本,因为开始构建项目所用的插件版本太低
(1)、npm uninstall webpack-dev-server
(2)、npm install webpack-dev-server@2.9.1
(3)、npm run dev

Error: Cannot find module ‘extract-text-webpack-plugin‘解决方法

1.全局安装npm init:

npm init -y -g

2、全局安装webpack(分别执行以下2条命令):

npm install webpack -g
npm install webpack --save-dev -g

3、全局安装extract-text-webpack-plugin:

npm install --save extract-text-webpack-plugin
————————————————
版权声明:本文为优快云博主「徊忆羽菲」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.youkuaiyun.com/guo_qiangqiang/article/details/109208780

三、在在浏览器输入http://localhost:8080 即可看到vue项目的网页

### 如何在 IntelliJ IDEA 中使用 Spring Boot 进行开发 #### 创建新的 Spring Boot 项目 打开 IntelliJ IDEA 后,选择 "Create New Project" 来启动新建项目的向导。在这个过程中可以选择基于 Spring Initializr 初始化器来构建 Spring Boot 应用程序[^1]。 #### 配置项目设置 当选择了 Spring Initializr 方式创建项目时,在弹出的窗口里能够指定 Group 和 Artifact ID 等基本信息,并且可以从列表中挑选所需的依赖项,比如 Web, JPA 或者 Security 组件等。对于较新版本的 IntelliJ IDEA,默认情况下可能只提供 JDK 17 及以上作为目标运行环境的选择,因为 Spring Boot 3.x 不再支持低于此版本的 Java 发行版[^4]。 #### 编写代码配置文件 一旦项目结构建立完毕,就可以着手于业务逻辑实现以及必要的配置工作了。通常会涉及到修改 `application.properties` 或 `application.yml` 文件来进行数据库连接字符串、服务器端口等一系列参数设定;同时也会涉及编写 RESTful API 控制器类或其他服务层组件[^3]。 #### 解决常见问题 - **无法找到主应用程序类**:确保已经定义了一个带有 `@SpringBootApplication` 注解的应用入口点,并放置在一个合适的包路径下以便被扫描到。 - **Maven/Gradle 构建失败**:检查 pom.xml 或 build.gradle 是否存在拼写错误或是不兼容的库版本冲突情况。 - **Tomcat 启动异常**:查看日志输出寻找具体的报错提示信息,可能是由于端口号占用或者其他资源访问权限不足引起的问题。 ```java @SpringBootApplication public class DemoApplication { public static void main(String[] args) { SpringApplication.run(DemoApplication.class, args); } } ```
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值