一、引言

在现代Web开发中，前后端分离已成为主流架构模式。Vue.js作为前端框架，Node.js作为后端运行环境，两者的结合为全栈开发提供了完美的解决方案。本文将分享实际项目中的经验和最佳实践。

二、技术栈选择

1 前端技术栈

Vue 3 + Vite：新一代开发构建工具
Pinia：状态管理
Vue Router：路由管理
Axios：HTTP请求
Element Plus：UI组件库

2 后端技术栈

Node.js + Express：Web服务器
MongoDB：数据库
JWT：身份认证
PM2：进程管理

三、项目架构设计

1 目录结构

project/
├── client/          # 前端项目
│   ├── src/
│   ├── components/
│   └── views/
├── server/          # 后端项目
│   ├── controllers/
│   ├── models/
│   └── routes/
└── docker/          # 容器配置

2 前后端通信

RESTful API设计
统一的请求响应格式
全局错误处理

四、实战经验分享

1 前端开发技巧

// 封装axios请求
import axios from 'axios'

const request = axios.create({
  baseURL: '/api',
  timeout: 5000
})

request.interceptors.request.use(config => {
  // 添加token
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

request.interceptors.response.use(
  response => response.data,
  error => {
    // 统一错误处理
    if (error.response.status === 401) {
      router.push('/login')
    }
    return Promise.reject(error)
  }
)

2 后端开发实践

// Express中间件处理跨域
app.use(cors({
  origin: process.env.CLIENT_URL,
  credentials: true
}))

// 路由中间件
const authMiddleware = async (req, res, next) => {
  try {
    const token = req.headers.authorization?.split(' ')[1]
    if (!token) {
      throw new Error('未授权')
    }
    const decoded = jwt.verify(token, process.env.JWT_SECRET)
    req.user = decoded
    next()
  } catch (error) {
    res.status(401).json({ message: '认证失败' })
  }
}

五、性能优化

1 前端优化

路由懒加载
组件按需导入
图片懒加载
虚拟列表

2 后端优化

数据库索引优化
缓存策略
并发控制
日志管理

六、部署与运维

1 Docker部署

# 前端Dockerfile
FROM node:16
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

2 CI/CD流程

代码提交
自动化测试
构建镜像
自动部署

七、项目实践要点

1 状态管理

// Pinia store设计
export const useUserStore = defineStore('user', {
  state: () => ({
    userInfo: null,
    token: null
  }),
  actions: {
    async login(credentials) {
      const { data } = await api.login(credentials)
      this.userInfo = data.user
      this.token = data.token
    }
  }
})

2 错误处理

// 全局错误处理
app.config.errorHandler = (err, vm, info) => {
  console.error(err)
  ElMessage.error(err.message)
}

八、安全性考虑

XSS防御
CSRF防护
数据加密
权限控制

九、总结

Vue.js与Node.js的结合为全栈开发提供了强大的解决方案。关键点包括：

合理的架构设计
规范的代码组织
完善的错误处理
充分的安全考虑
持续的性能优化

通过这些实践，可以构建出高质量的全栈应用。建议开发者在实际项目中根据具体需求灵活运用这些经验。

十、扩展阅读

Vue.js官方文档
Node.js最佳实践
Express安全指南
MongoDB性能优化

希望这篇文章能帮助开发者在Vue.js和Node.js全栈开发道路上少走弯路，构建出更好的应用。

四时宝库

程序员的知识宝库

Vue与Node.js结合的实战经验