工欲善其事，必先利其器。《Vue3+Express实战》的项目实战部分要顺利推进，首先需要搭建一套可靠、可扩展的开发环境。本文将以实际开发流程为线索，带你从零初始化一个前后端分离的全栈项目，并处理好开发中的代理、热更新、跨域等关键细节，为后续功能开发打好地基。
一、环境依赖准备
在正式创建项目前，请确认本机已经安装以下基础工具并保证版本满足要求：
- Node.js：建议使用 18.12 及以上版本。Vue3 官方脚手架与 Vite 均依赖较新的 Node 特性，同时 Express 的现代中间件生态也能更好兼容。
- 包管理器：npm 为最稳妥的选择；如果你更在意安装速度与依赖管理效率，推荐安装 pnpm 或 yarn 作为备用。
- Git：用于版本管理与协作，同时也能帮助在后续出错时快速回退。
检查方法：
node -v
npm -v
git --version如果 Node 版本过低，推荐通过 nvm（Node Version Manager）安装和管理多版本，避免污染系统环境。
二、初始化 Vue3 前端项目
项目根目录建议命名为 vue3-express-proj，内部大致分为 client（前端）与 server（后端）两个子目录。这样职责清晰，也便于部署时分别构建。
在根目录下打开终端，执行：
npm create vite@latest client -- --template vue如果希望使用 TypeScript，可将模板类型替换为 vue-ts：
npm create vite@latest client -- --template vue-ts进入前端目录并安装依赖：
cd client
npm install
npm run dev此时访问 http://localhost:5173，能看到 Vite 默认页面即说明前端骨架搭建成功。
前端目录结构调整建议
在 src 下按业务划分目录，而不是全部塞在 components 中：
src/
|-- api/ # 接口请求封装
|-- assets/ # 静态资源
|-- components/ # 通用组件
|-- router/ # 路由配置
|-- stores/ # 状态管理（如果使用 Pinia）
|-- views/ # 页面视图
|-- utils/ # 工具函数
|-- App.vue
|-- main.js/ts在一开始的开发环境搭建阶段，就把目录约定确定下来，后续多人协作时可以少走很多弯路。
三、初始化 Express 后端项目
后端推荐使用独立的 Express 应用。基础做法是在 server 目录下手动生成 package.json：
mkdir server
cd server
npm init -y安装 Express 和常用开发工具：
npm install express cors dotenv
npm install -D nodemonexpress：核心 Web 框架。cors：处理跨域请求。dotenv：读取.env环境变量。nodemon：监听代码变更并自动重启服务，是开发阶段的必备帮手。
创建最基本的入口文件 server/index.js：
require('dotenv').config();
const express = require('express');
const cors = require('cors');
const app = express();
const port = process.env.PORT || 3000;
app.use(cors());
app.use(express.json());
app.get('/', (req, res) => {
res.json({ message: 'Hello from Express API' });
});
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});在 package.json 中添加启动脚本：
"scripts": {
"dev": "nodemon index.js",
"start": "node index.js"
}启动后端：
npm run dev终端输出 Server running at http://localhost:3000 即表示后端服务正常。
后端目录结构规划
server 下同样遵循模块化思路：
server/
|-- config/ # 配置文件与数据库连接
|-- controllers/ # 控制器层，处理业务逻辑
|-- middleware/ # 自定义中间件
|-- models/ # 数据模型
|-- routes/ # 路由定义
|-- services/ # 服务层
|-- utils/ # 工具函数
|-- index.js虽然目前我们还在环境搭建阶段，但先搭好框架能够避免后期大规模重构。
四、前后端联调：代理与跨域问题
开发中最容易遇到的障碍就是跨域。虽然后端已经使用了 cors，但更推荐的开发方式是通过 Vite 的代理功能，将前端的请求转发给后端接口，从而在浏览器层面屏蔽跨域问题。
修改 client/vite.config.js：
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
server: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
// 如果需要后端路由不带 /api 前缀，可以在这里重写
// rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
});这样，前端代码中请求 /api/xxx 时，开发服务器会自动将其转发到 http://localhost:3000，同时不会触发浏览器同源策略限制。
前端请求示例：
fetch('/api/hello')
.then(res => res.json())
.then(data => console.log(data));后端对应路由：
app.use('/api/hello', (req, res) => {
res.json({ message: 'Hello Proxy' });
});修改完成后，需要重启前端 Vite 服务，让代理配置生效。
五、环境变量的统一管理
在根目录创建 .env.example，同时在前端和后端中定义各自需要的环境变量。
后端的 .env 示例：
PORT=3000
DB_HOST=localhost
DB_PORT=5432
DB_USER=root
DB_PASS=123456前端由于是基于 Vite 构建，环境变量默认需要以 VITE_ 开头才能在代码中安全暴露。在 client 目录下新建 .env.development：
VITE_API_BASE=/api这样在业务代码中：
const apiBase = import.meta.env.VITE_API_BASE;注意：不要将包含敏感信息的 .env 文件提交到 Git。建议将 .env 加入 .gitignore，只保留 .env.example 作为模板。
六、一步启动：并行运行前后端
每次手动启动两个终端比较繁琐，可以在项目根目录使用 concurrently 来并行运行前后端开发命令。
在根目录初始化一个 package.json：
npm init -y
npm install -D concurrently修改根目录的 package.json：
{
"scripts": {
"dev": "concurrently \"npm run dev --prefix server\" \"npm run dev --prefix client\""
}
}执行：
npm run dev一个终端即可同时看到前后端的日志输出，大大提升开发体验。
七、常见问题与处理思路
1. Vite 端口被占用
开发者可能同时运行多个项目，有些项目固定占用 5173。可以在 vite.config.js 中指定 server.port 并新增 strictPort: false，让 Vite 在端口被占用时自动递增端口：
server: {
port: 5173,
strictPort: false,
proxy: { ... }
}2. 跨域了但后端仍看不到请求
检查 Vite 代理是否只配置在 server 字段下，并且修改配置后是否重启了前端。另外，请求路径是否真的以 /api 开头，如果请求的是绝对地址 http://localhost:3000/api，则不会走 Vite 代理。
3. 后端修改代码后没有自动重启
请确认 nodemon 已经安装并配置了 dev 脚本。终端不要关闭，持续观察是否有重启提示。如果使用 VS Code，也可能是终端占用或暂停导致的。
4. 前端如何格式化代码
推荐在根目录统一配置 ESLint 和 Prettier。这一步虽然不属于“启动”环境，但项目开发中保持统一的代码风格非常关键，建议在最初加入。
cd client
npm install -D eslint eslint-plugin-vue prettier八、搭建过程中的最佳实践
- 每个模块提交一次 Git，不要一次把全部初始代码都提交上去。例如：先提交“前端初始化”，再提交“后端初始化”，再提交“联调配置”。
- 使用一套稳定的 Node 版本，并在根目录添加
.nvmrc文件约束：node -v > .nvmrc - 前后端请求链路尽早打通，不要等前端页面写完了再联调，环境搭建阶段就应当用最简接口验证代理与网络通路是否顺畅。
- 注意域名与 Cookie 相关的跨域语义，如果后续需要携带认证信息，开发环境代理配置的
changeOrigin: true通常已经满足需求。
通过上述步骤，一个前后端分离、支持热更新、代理联调、并行启动的 Vue3 + Express 开发环境就已经准备就绪。这套环境不只是一次性的“能跑起来”，更核心的是通过清晰的目录结构与代理机制，让你在后续编写《Vue3+Express实战》项目中的用户认证、文章管理、评论交互等模块时，可以绕过环境噪音，专注于业务逻辑与代码质量。
