一、引言

在现代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部署

# 前端DockerfileFROM node:16WORKDIR /appCOPY package*.json ./RUN npm installCOPY . .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)}

八、安全性考虑

1. XSS防御
2. CSRF防护
3. 数据加密
4. 权限控制

九、总结

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

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

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

十、扩展阅读

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

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