Vue3搭前端、Express做后端，全栈项目咋玩得转？

terry 10小时前阅读数 89 #SEO

文章标签 Vue3；Express

做全栈项目时，前端用Vue3、后端选Express的组合越来越火，但从技术选型到部署上线，新手常犯懵：咋初始化项目？前后端咋通信？部署有啥坑？下面用问答形式把这些关键环节拆明白。

为啥挑Vue3和Express搞全栈开发？

选技术栈得看“适配度”，Vue3对前端开发太友好：组合式API让逻辑复用更丝滑，复杂组件的代码不再像“意大利面条”；性能狂飙（响应式重构+Tree - shaking），页面加载和交互更流畅；生态里UI库（Element Plus、Naive UI）现成，搭页面效率飞起。

Express是Node后端的“老大哥”：轻量灵活，路由和中间件想咋配就咋配；生态成熟到“闭着眼找中间件”——处理日志、解析请求体、防跨域…需求都有现成轮子；学习成本低，后端新手能快速写出接口，和前端联调不卡壳。

两者组合像“高效搭子”：前端用Vue3做交互（表单、动画、路由），后端靠Express出接口（查数据库、处理业务逻辑），中小型项目（博客、管理系统、工具站）用这组合，开发周期短、维护成本低，还能练通全栈思维。

从0开始，前后端项目咋初始化？

想快速跑通前后端，得把“项目骨架”搭对：

前端：用Vite建Vue3项目

别再用Vue CLI！Vite的热更新和打包速度能省半小时开发时间，终端执行这串命令：

npm create vite@latest my-vue3-app -- --template vue
cd my-vue3-app
npm install
npm run dev

执行完，浏览器打开http://localhost:5173，能看到Vue3默认页面，前端环境就ready了。

后端：Express项目初始化

新建后端文件夹，终端执行：

mkdir my-express-server && cd my-express-server
npm init -y  # 自动生成package.json
npm install express

然后新建server.js，写最基础的服务代码：

const express = require('express')
const app = express()
const port = 3000
app.get('/', (req, res) => {
  res.send('后端服务启动啦！')
})
app.listen(port, () => {
  console.log(`后端跑在http://localhost:${port}`)
})

执行node server.js，访问http://localhost:3000，看到“后端服务启动啦！”，后端也跑通了。

目录规划：清晰分离才好维护

把前端代码丢进client文件夹，后端丢进server文件夹，根目录放package.json（管理全局脚本）、.gitignore（忽略敏感文件），结构大概长这样：

my-fullstack-app/
├─ client/       # 前端Vue3项目（Vite生成的文件）
├─ server/       # 后端Express项目
│  ├─ server.js  # 后端入口文件
│  └─ package.json
└─ package.json  # 可选：放全局脚本（比如同时启动前后端）

前后端咋“对话”？接口通信和跨域咋解决？

前端要拿数据、后端要收请求，得解决“咋发请求”和“跨域拦截”两个问题。

前端用Axios发请求

前端项目装Axios：npm install axios，然后在Vue组件里写请求，比如做个“获取用户列表”的功能：

<script setup>
import axios from 'axios'
const getUsers = async () => {
  try {
    // 后端接口地址
    const res = await axios.get('http://localhost:3000/api/users')
    console.log(res.data) // 打印后端返回的用户列表
  } catch (err) {
    console.error('请求失败：', err)
  }
}
</script>

后端用Express写接口

后端在server.js里加路由，返回模拟数据：

app.get('/api/users', (req, res) => {
  const mockUsers = [
    { id: 1, name: '小明' },
    { id: 2, name: '小红' }
  ]
  res.json(mockUsers) // 把数据转成JSON返回
})

跨域问题：用cors中间件解决

前端跑在localhost:5173，后端在localhost:3000，直接请求会被浏览器拦截（跨域限制），后端装cors中间件：

npm install cors

然后在server.js里配置：

const cors = require('cors')
app.use(cors()) // 允许所有域名跨域（开发时方便，生产要限制）

这样前端就能顺利拿到后端数据啦！

Express中间件能帮咱省多少事儿？

中间件是Express的“魔法工具”——能在请求到达路由前，自动处理日志、解析数据、验证权限…重复活交给中间件，写业务代码更专注。

常用中间件：开箱即用的效率神器

解析请求体：用express.json()和express.urlencoded()，让后端能拿到POST请求里的JSON或表单数据，代码里加：

app.use(express.json())       // 解析JSON格式的请求体
app.use(express.urlencoded({ extended: true })) // 解析表单数据

之后，req.body就能直接拿到前端传的参数，比如处理注册接口：

app.post('/api/register', (req, res) => {
  console.log(req.body.username) // 前端传的用户名
})

日志中间件morgan：装npm install morgan，然后加：
```
const morgan = require('morgan')
app.use(morgan('dev')) // 终端打印请求方法、路径、状态码、响应时间
```
每次前端发请求，终端会输出类似GET /api/users 200 5ms的日志，调试超方便。

错误处理中间件：兜底“救火”

后端代码难免报错，用错误中间件统一捕获：

app.use((err, req, res, next) => {
  console.error('服务器错误：', err.stack) // 打印错误堆栈
  res.status(500).send('服务器开小差了，请稍后再试～')
})

这样用户不会看到“白屏+乱码报错”，体验更友好。

自定义中间件：比如权限验证

假设某些接口要“登录后才能访问”，写个中间件检查token：

const checkAuth = (req, res, next) => {
  const token = req.headers.authorization
  if (token && token === 'my-secret-token') {
    next() // 有权限，继续执行后续逻辑
  } else {
    res.status(401).send('请先登录～')
  }
}
// 给需要权限的接口加中间件
app.get('/api/private', checkAuth, (req, res) => {
  res.send('这是只有登录后才能看的内容～')
})

项目写完咋部署上线？前后端一起搞要注意啥？

开发时本地跑很丝滑，上线却容易栽跟头，得把“前端静态资源”“后端服务托管”“域名代理”这三件事搞透。

前端部署：打包+静态托管

Vite项目执行npm run build，会生成dist文件夹（里面是压缩后的HTML、CSS、JS），把这些文件丢到Nginx的html目录，或者用云服务商的静态托管（比如阿里云OSS、腾讯云COS、Vercel）。

后端部署：用PM2守护进程

Node服务一旦崩溃就会停，得用进程管理工具，推荐PM2：

全局安装：npm install pm2 -g
进入后端目录，启动服务：pm2 start server.js --name my-server
PM2会自动重启崩溃的进程，还能查看日志（pm2 logs）、管理多个服务（pm2 list）。

反向代理：用Nginx统一管理域名

前端和后端要通过同一个域名访问（比如www.your-site.com），得用Nginx做反向代理，配置文件（比如/etc/nginx/conf.d/default.conf）这样写：

server {
  listen 80;
  server_name www.your-site.com;
  # 前端静态资源：访问根路径时，返回dist里的文件
  location / {
    root /path/to/frontend/dist;
    try_files $uri $uri/ /index.html; # 单页应用路由处理
  }
  # 后端接口：访问/api/xxx时，转发到后端服务
  location /api/ {
    proxy_pass http://localhost:3000; # 后端服务的地址
    proxy_set_header Host $host;     # 保留原域名
    proxy_set_header X-Real-IP $remote_addr; # 保留客户端IP
  }
}

这样，用户访问www.your-site.com是前端页面，访问www.your-site.com/api/users会转发到后端接口。

HTTPS配置：给网站加“安全锁”

现在主流网站都用HTTPS，得申请SSL证书（推荐Let's Encrypt免费证书），用Nginx配置443端口，把HTTP请求强制跳转到HTTPS：

server {
  listen 443 ssl;
  server_name www.your-site.com;
  ssl_certificate /path/to/fullchain.pem; # 证书文件
  ssl_certificate_key /path/to/privkey.pem; # 私钥文件
  # 其他配置...
}
server {
  listen 80;
  server_name www.your-site.com;
  return 301 https://$host$request_uri; # HTTP跳HTTPS
}

想加数据库，Vue3+Express咋整合？

全栈项目离不开数据库，以MongoDB（非关系型数据库）为例，结合Mongoose（操作MongoDB的工具）来演示：

后端连数据库+定义模型

装Mongoose：npm install mongoose

连接MongoDB（本地或云数据库）：

const mongoose = require('mongoose')
mongoose.connect('mongodb://localhost:27017/my-db')
  .then(() => console.log('数据库连接成功！'))
  .catch(err => console.error('连接失败：', err))

定义用户模型（比如models/User.js）：

const mongoose = require('mongoose')
const userSchema = new mongoose.Schema({
  name: String,
  age: Number,
  email: String
})
module.exports = mongoose.model('User', userSchema)

写增删改查接口

新增用户”接口：

const User = require('./models/User')
app.post('/api/users', async (req, res) => {
  const newUser = new User(req.body) // 前端传的用户数据
  try {
    await newUser.save() // 存到MongoDB
    res.status(201).send(newUser) // 返回新增的用户
  } catch (err) {
    res.status(400).send('新增失败：' + err.message)
  }
})

前端调接口存数据

前端用Axios发POST请求：

<script setup>
import axios from 'axios'
const addUser = async () => {
  const userData = { name: '小张', age: 25, email: 'zhangsan@example.com' }
  try {
    const res = await axios.post('http://localhost:3000/api/users', userData)
    console.log('新增用户成功：', res.data)
  } catch (err) {
    console.error('新增失败：', err)
  }
}
</script>

这样前后端+数据库就彻底打通，能做用户管理、订单系统这类复杂业务了。

开发时，环境变量咋管理更安全？

数据库密码、JWT密钥这些敏感信息，不能硬编码在代码里（否则传到GitHub会泄露），得用环境变量管理。

前端：Vite的.env文件

Vite里用.env.development（开发环境）和.env.production（生产环境），变量名必须以VITE_开头，比如开发时，后端接口地址写在.env.development：

VITE_API_BASE_URL = 'http://localhost:3000'

前端代码里用import.meta.env.VITE_API_BASE_URL获取：

axios.defaults.baseURL = import.meta.env.VITE_API_BASE_URL

后端：dotenv包+ .env文件

后端装dotenv：npm install dotenv，然后在server.js开头加：

require('dotenv').config() // 自动读取根目录的.env文件
console.log(process.env.DB_PASSWORD) // 读取.env里的数据库密码

.env文件里存敏感信息：

DB_PASSWORD = 'my-super-secret-password'
JWT_SECRET = 'my-jwt-secret'

注意：把.env加到.gitignore里，别让敏感信息进代码仓库！

从技术选型到部署上线，Vue3+Express的全栈开发链路其实是“前端高效构建页面+后端快速输出接口+中间件提效+数据库存数据+环境变量保安全”的组合拳，上手后会发现，这套组合灵活又好扩展，中小型项目用它能快速落地，还能帮你打通全栈开发的任督二脉～

要是你在开发中遇到具体问题（比如Vue3的组合式API咋封装复用、Express中间件顺序咋调），评论区喊一声,咱再细拆！

版权声明

本文仅代表作者观点，不代表Code前端网立场。
本文系作者Code前端网发表，如需转载，请注明页面地址。

上一篇：Vue3和Electron结合开发桌面应用，这些问题你搞懂了吗？