从零到一：Spring Boot + Vue 项目前后端运行完整指南

手把手教你解决 PyCharm 运行 Spring Boot、Maven 项目启动、Vue 依赖安装巨慢等常见坑

前言

最近接手了一个 springboot-vue 项目，本以为前后端分离跑起来很简单，结果从 npm install 的各种报错，到 PyCharm 里跑 Spring Boot 的配置，踩了不少坑。本文把完整的解决过程记录下来，希望能帮你少走弯路。

一、在 PyCharm 中运行 Spring Boot 项目

PyCharm 本身是 Python IDE，但通过插件和 Maven 配置也可以很好地运行 Spring Boot 项目。

1. 安装 Java 支持插件

打开 File → Settings → Plugins
搜索 "Java"，安装 Java Support 插件，重启 IDE

2. 配置 Maven

Settings → Build, Execution, Deployment → Build Tools → Maven
设置 Maven home directory（指向你本地 Maven 安装路径）

3. 创建运行配置

Run → Edit Configurations → + → Maven
填写：
- Name: Run Spring Boot
- Command line: spring-boot:run
可选：勾选 Skip Tests 加速启动

之后点击右上角绿色三角即可运行。

4. 备选：直接使用命令行

在项目根目录（包含 pom.xml）打开 Terminal，执行：

bash

复制代码

mvn spring-boot:run

或使用项目自带的 Maven Wrapper：

bash

复制代码

./mvnw spring-boot:run

二、Maven 项目怎么跑起来

常用 Maven 命令

命令	说明
`mvn clean`	清理 target 目录
`mvn compile`	编译源码
`mvn test`	执行单元测试
`mvn package`	打包成 jar/war
`mvn install`	打包并安装到本地仓库
`mvn spring-boot:run`	直接运行 Spring Boot 项目
`mvn tomcat7:run`	传统 Web 项目用 Tomcat 插件运行

在 IDE 中快速执行

IntelliJ IDEA ：右侧 Maven 工具栏，展开 Lifecycle 或 Plugins 双击即可
Eclipse ：右键项目 → Run As → Maven build... → 输入 clean install
VS Code ：安装 Extension Pack for Java 后，左侧 Maven 视图直接点击命令

三、Vue 项目依赖安装失败？这里有你需要的所有解法

前端项目在 vue 目录下执行 npm install 时，遇到了大量错误：

text

复制代码

npm warn tar ENOENT: Cannot cd into '.../node_modules/...'
npm warn tarball tarball data for ... seems to be corrupted

同时 npm install 速度极慢，几分钟都装不完。

问题原因

npm 缓存损坏：导致解压依赖包时失败
项目路径包含中文 ：D:\Develop\_接单\... 中的中文可能引起工具链兼容问题
网络慢：默认 npm 源在国外，下载速度极慢

完整解决步骤

Step 1：将项目移动到纯英文路径

text

复制代码

原路径：D:\Develop\_接单\springboot-vue\foster\vue
新路径：D:\Develop\springboot-vue\foster\vue

Step 2：清除 npm 缓存并重装

bash

复制代码

# 进入项目目录
cd D:\Develop\springboot-vue\foster\vue

# 删除已有依赖和锁文件
rmdir /s /q node_modules
del package-lock.json

# 强制清理缓存
npm cache clean --force

# 使用国内镜像源安装（腾讯云示例）
npm install --registry=https://mirrors.cloud.tencent.com/npm/

Step 3：永久切换国内镜像源（推荐）

bash

复制代码

# 设为淘宝镜像
npm config set registry https://registry.npmmirror.com/

# 验证
npm config get registry

Step 4：加速大型二进制包下载（如 puppeteer、electron 等）

如果项目中包含这类包，单独配置环境变量：

bash

复制代码

# Windows CMD
set PUPPETEER_DOWNLOAD_HOST=https://registry.npmmirror.com/-/binary/chromium-browsers/

或使用 PowerShell：

powershell

复制代码

$env:PUPPETEER_DOWNLOAD_HOST="https://registry.npmmirror.com/-/binary/chromium-browsers/"

Step 5：终极提速------换用 pnpm

bash

复制代码

# 全局安装 pnpm
npm install -g pnpm

# 之后使用 pnpm install 代替 npm install
pnpm install

四、Vue 项目的 package.json 详解与启动

成功安装后，我们来看典型的 package.json：

json

复制代码

{
  "name": "vue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "axios": "^1.8.1",
    "core-js": "^3.8.3",
    "echarts": "^5.6.0",
    "element-ui": "^2.15.14",
    "vue": "^2.6.14",
    "vue-router": "^3.5.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "vue-template-compiler": "^2.6.14"
  }
}

两个核心脚本的区别

脚本	命令	用途	是否生成文件
`serve`	`npm run serve`	启动开发服务器（热重载、调试）	否（运行在内存）
`build`	`npm run build`	生产环境打包（压缩、优化）	是，生成 `dist` 文件夹

有人会问：为什么是 serve 而不是 server？

这是 Vue CLI 官方规定的动词命名（提供开发服务），不是拼写错误。如果习惯 server 可以自己改，但保留官方命名有助于团队协作。

启动开发服务器

bash

复制代码

npm run serve

输出类似：

text

复制代码

App running at:
- Local:   http://localhost:8080/
- Network: http://192.168.x.x:8080/

打包生产文件

bash

复制代码

npm run build

生成的 dist 目录可直接部署到 Nginx、Tomcat 等服务器，或复制到 Spring Boot 的 src/main/resources/static 下。

五、前后端联调常见问题

1. 端口冲突

Vue 默认 8080，Spring Boot 默认也是 8080。
解决方案 ：在后端 application.properties 中修改端口：

properties

复制代码

server.port=8081

2. 跨域问题

前端访问后端 API 时浏览器报跨域错误。
解决方案 ：在 vue 目录下创建 vue.config.js，配置代理：

javascript

复制代码

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8081',  // 后端地址
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
}

之后前端所有 /api/xxx 请求会被转发到后端，无需处理 CORS。

六、总结

阶段	关键命令 / 操作
后端启动（Maven）	`mvn spring-boot:run`
前端依赖安装	`npm install --registry=https://registry.npmmirror.com/`
前端开发	`npm run serve`
前端打包	`npm run build`
前后端联调	配置代理或修改后端端口

另外记住三点：

路径不要有中文，否则 npm 可能各种诡异错误
npm 安装慢就换镜像源，淘宝/腾讯/华为随便挑
serve 是开发，build 是上线，别混用

希望这篇文章能帮你顺利跑起 Spring Boot + Vue 项目。如果你也踩过其他奇怪的坑，欢迎评论区交流！