Vue项目如何同时启动前后端服务？生产环境单端口配置方法

嘿，我来帮你搞定这两个常见问题——开发环境一键启动前后端，还有生产环境用单端口统一部署，这俩配置其实都挺容易实现的，咱们一步步来：

你现在已经有了client和server两个单独的启动脚本，只需要借助一个叫concurrently的工具，就能让它们在同一个终端里同时运行。

• 第一步：安装concurrently（作为开发依赖即可）

npm install concurrently --save-dev
# 或者用yarn
yarn add concurrently --dev

• 第二步：修改你的package.json里的scripts，新增一个dev命令：

{
  "scripts": {
    "client": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "server": "nodemon src/server/server.js --exec babel-node",
    "dev": "concurrently \"npm run client\" \"npm run server\""
  }
}

之后你只需要在终端输入npm run dev，就能同时启动前端的webpack-dev-server和后端的nodemon服务了，两个服务的日志会在同一个终端里分开显示，方便调试。

生产环境下，我们需要把前端项目打包成静态文件，然后让后端服务来托管这些静态文件，同时处理API请求，这样就只用一个端口对外提供服务了。

步骤1：打包前端项目 #

先执行前端的打包命令（一般Vue项目默认是npm run build，如果你的配置不一样，对应调整），打包完成后会生成一个dist目录，里面就是编译好的前端静态资源。

步骤2：修改后端server.js，托管静态文件 #

假设你的后端用的是Express（大部分Node.js后端框架思路类似），你需要在server.js里添加静态文件托管的配置，同时处理前端路由的兼容问题（避免刷新页面出现404）：

const express = require('express');
const app = express();
const path = require('path');

// 1. 托管前端静态文件
// 注意：这里的路径要对应你的dist目录位置，根据项目结构调整
app.use(express.static(path.join(__dirname, '../../dist')));

// 2. 处理你的API路由（这部分保留你原有的后端接口逻辑）
app.get('/api/xxx', (req, res) => {
  res.json({ message: 'API response' });
});

// 3. 处理前端路由：所有非API的请求都返回index.html，适配Vue的history模式
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../../dist/index.html'));
});

// 启动服务，监听指定端口（比如3000）
const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

步骤3：修改生产环境启动脚本 #

在package.json里新增一个start命令（或者修改现有命令），用来启动生产环境的后端服务：

{
  "scripts": {
    // ... 其他命令
    "build": "node build/build.js", // 你的前端打包命令
    "start": "babel-node src/server/server.js" // 生产环境启动后端（如果不需要babel转译，直接用node即可）
  }
}

部署流程 #

1. 先执行npm run build打包前端，生成dist目录
2. 执行npm run start启动后端服务，此时前端静态文件和后端API都通过同一个端口（比如3000）访问，前端请求API时直接用相对路径（比如/api/xxx）就可以，不用跨域了。

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