如何将Vue.js与Node.js Express集成？项目结构及通信咨询

一、合理的项目结构组织 #

根据项目规模，推荐两种常见结构，Express 的 app.js 位置如下：

1. 前后端同项目（小型项目首选） #

把前端和后端代码放在同一个根目录下，便于统一管理：

your-project/
├── backend/          # 存放 Express 后端代码
│   ├── app.js        # Express 主入口文件（核心配置在这里）
│   ├── routes/       # 接口路由文件夹
│   │   └── api.js    # 具体 API 逻辑
│   └── package.json  # 后端依赖配置
├── frontend/         # Vue 前端项目（用 Vue CLI/Vite 创建）
│   ├── src/
│   ├── public/
│   └── package.json
└── package.json      # 可选：根目录配置脚本，一键启动前后端

2. 前后端分离（中大型项目首选） #

前后端作为独立项目分开维护，各自有完整的目录结构：

# 后端项目
express-backend/
├── app.js
├── routes/
└── package.json

# 前端项目
vue-frontend/
├── src/
├── public/
└── package.json

二、Express 后端配置（以同项目结构为例） #

1. 基础配置（backend/app.js） #

这里处理跨域、请求解析、路由挂载等核心逻辑：

const express = require('express');
const cors = require('cors');
const path = require('path');
const apiRoutes = require('./routes/api');

const app = express();

// 开发环境允许 Vue 前端跨域访问（替换为你的前端端口）
app.use(cors({ origin: 'http://localhost:8080' }));
// 解析 JSON 格式的请求体
app.use(express.json());

// 挂载 API 路由，所有接口以 /api 开头
app.use('/api', apiRoutes);

// 生产环境：托管 Vue 打包后的静态文件
if (process.env.NODE_ENV === 'production') {
  app.use(express.static(path.join(__dirname, '../frontend/dist')));
  // 非 API 请求返回 Vue 入口页面（解决单页应用路由问题）
  app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, '../frontend/dist/index.html'));
  });
}

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

2. 编写 API 路由（backend/routes/api.js） #

这里实现具体的数据交互逻辑：

const express = require('express');
const router = express.Router();

// 示例：向前端返回数据
router.get('/data', (req, res) => {
  res.json({
    message: '来自 Express 服务器的数据',
    list: ['Vue.js', 'Express', 'Node.js']
  });
});

// 示例：接收前端发送的数据
router.post('/submit', (req, res) => {
  const formData = req.body;
  console.log('收到前端提交的数据:', formData);
  // 这里可以添加数据存储（如数据库操作）逻辑
  res.json({ status: 'success', received: formData });
});

module.exports = router;

三、Vue 前端与 Express 通信 #

这里以 axios 为例（也可以用原生 fetch）：

1. 安装 axios #

在 Vue 项目目录执行：

npm install axios

2. 在 Vue 组件中发起请求 #

<template>
  <div>
    <h3>从服务器获取的数据：</h3>
    <p>{{ serverData?.message }}</p>
    <ul>
      <li v-for="item in serverData?.list" :key="item">{{ item }}</li>
    </ul>

    <h3>提交数据到服务器：</h3>
    <input v-model="formData.name" placeholder="姓名" />
    <textarea v-model="formData.message" placeholder="留言"></textarea>
    <button @click="submitForm">提交</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      serverData: null,
      formData: { name: '', message: '' }
    };
  },
  mounted() {
    // 页面加载时获取服务器数据
    this.fetchServerData();
  },
  methods: {
    async fetchServerData() {
      try {
        const response = await axios.get('http://localhost:3000/api/data');
        this.serverData = response.data;
      } catch (err) {
        console.error('获取数据失败:', err);
      }
    },
    async submitForm() {
      try {
        const response = await axios.post('http://localhost:3000/api/submit', this.formData);
        console.log('提交成功:', response.data);
        alert('提交成功！');
      } catch (err) {
        console.error('提交失败:', err);
      }
    }
  }
};
</script>

四、开发与生产环境启动 #

1. 开发环境 #

• 启动后端：进入 backend 目录，执行 npm start
• 启动前端：进入 frontend 目录，执行 npm run serve（Vue CLI）或 npm run dev（Vite）

如果用根目录的统一脚本，先安装 concurrently：

npm install concurrently --save-dev

然后在根目录 package.json 添加：

{
  "scripts": {
    "start:backend": "cd backend && npm start",
    "start:frontend": "cd frontend && npm run serve",
    "dev": "concurrently \"npm run start:backend\" \"npm run start:frontend\""
  }
}

执行 npm run dev 即可同时启动前后端。

2. 生产环境 #

• 打包 Vue 前端：进入 frontend 目录，执行 npm run build，生成 dist 文件夹
• 启动 Express 服务器：进入 backend 目录，设置 NODE_ENV=production 后执行 npm start，此时 Express 会同时托管前端静态文件和提供 API。

内容的提问来源于stack exchange，提问作者Julian Bausch