vue+springboot 项目构建idea

创建 Vue 和 Spring Boot 集成项目
1. 创建 Spring Boot 项目
在 IntelliJ IDEA 中创建一个新的 Spring Boot 项目。选择 Create New Project，然后选择 Spring Initializr 并设置相关参数[^1]。
@SpringBootApplication
public class Application {
public static void main(String[] args) {
SpringApplication.run(Application.class, args);
}
}
登录后复制
为了使前端和后端能够更好地通信，在 Spring Boot 应用程序中配置 CORS 支持：
@Configuration
public class WebConfig implements WebMvcConfigurer {

@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*") // 生产环境中应指定具体域名
.allowedMethods("GET", "POST", "PUT", "DELETE");
}
}
登录后复制
2. 添加 Vue.js 前端支持
在同一工作空间内启动新的 Vue.js 项目。通过命令行工具安装 Vue CLI 后执行如下指令来初始化新应用：
npm install -g @vue/cli
vue create frontend-app
cd frontend-app
npm run serve
登录后复制
也可以直接利用 IntelliJ IDEA 提供的功能简化这一步骤。进入 File -> New -> Project..., 接着挑选 Static Web -> Vue.js 来快速搭建环境并完成初始设定[^2]。
确保已正确设置了插件以便于管理依赖关系以及提供必要的编码辅助功能。如果发现无法找到对应的插件选项，则可能需要手动下载或更新至最新版本的 IDE 及其扩展组件[^4]。
3. 整合前后端服务
为了让两个独立运行的服务相互协作，建议采用相对路径访问资源文件，并调整打包后的静态页面部署位置。修改 vue.config.js 文件中的公共路径属性以适应实际需求：
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/static/'
: '/'
};
登录后复制
最后，在 Spring Boot 主应用程序类所在目录下新建名为 resources/static/ 的子文件夹用于放置编译好的前端产物；或者考虑借助代理服务器实现跨域请求转发机制从而绕过浏览器同源策略限制。