Vue前后端技能生成实战：从零搭建高可维护性全栈应用

6次阅读

共计 2533 个字符，预计需要花费 7 分钟才能阅读完成。

接口文档维护成本高：后端 API 变更时，Swagger 文档、前端 Mock 数据和 Postman 集合需要手动同步更新，常出现版本不一致
类型定义重复劳动：前端需要重新定义 DTO 类型，与后端的 Java 类 /TypeScript 接口存在冗余，字段修改时需多处变更
联调效率低下：前端需要启动 webpack-dev-server，后端需单独运行，跨域问题频繁出现，热更新需要手动刷新

Vite+Express 组合：适合需要快速启动的原型项目，Vite 的 ESM 特性与 Express 轻量级路由配合良好，但缺乏类型共享机制
Nuxt.js 全栈方案：内置 SSR 支持，适合 SEO 敏感场景，但 Node 层深度耦合 Vue，不适合需要微服务架构的场景
Vue CLI+Spring Boot：企业级应用首选，Spring 的强类型与 OpenAPI 生成能力强，但构建流程复杂

# 创建支持 TypeScript 的 Vue 项目
vue create my-app --preset __default_vue_3__ --packageManager yarn

关键配置项：
– 在 vue.config.js 中设置 devServer.proxy 解决跨域
– 启用 @vue/compiler-sfc 的reactivityTransform实验特性

# 生成 Express 脚手架
express --view=pug --git my-server

推荐中间件：
– compression启用 gzip 压缩
– helmet设置安全头部
– swagger-jsdoc生成 API 文档

// app.js 中集成 swagger
const swaggerJSDoc = require('swagger-jsdoc');
const options = {
  definition: {
    openapi: '3.0.0',
    info: {
      title: 'API 文档',
      version: '1.0.0',
    },
  },
  apis: ['./routes/*.js'], // 扫描路由文件
};
const swaggerSpec = swaggerJSDoc(options);
app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerSpec));

后端接口定义（使用 JSDoc）：

/**
 * @typedef {Object} UserDTO
 * @property {number} id
 * @property {string} name
 */

/**
 * @route GET /api/users
 * @returns {UserDTO[]}
 */
app.get('/api/users', (req, res) => {res.json([{ id: 1, name: 'John'}]);
});

前端组件调用：

<script setup lang="ts">
import {ref} from 'vue';
import axios from '@/plugins/axios';

// 自动生成的类型
interface User {
  id: number;
  name: string;
}

const users = ref<User[]>([]);
axios.get<User[]>('/api/users').then(res => {users.value = res.data;});
</script>

// src/utils/auth.ts
export const setupAxios = (axiosInstance: AxiosInstance) => {
  // 请求拦截器
  axiosInstance.interceptors.request.use(config => {const token = localStorage.getItem('token');
    if (token) {config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  });

  // 响应拦截器
  axiosInstance.interceptors.response.use(
    response => response,
    error => {if (error.response?.status === 401) {router.push('/login');
      }
      return Promise.reject(error);
    }
  );
};

server {
  listen 443 http2;
  gzip on;
  gzip_types text/plain application/json application/javascript;

  location /api {
    proxy_pass http://localhost:3000;
    proxy_set_header X-Real-IP $remote_addr;
  }

  location / {
    root /var/www/my-app/dist;
    try_files $uri $uri/ /index.html;
  }
}

启动命令：

pm2 start ecosystem.config.js --env production

配置文件示例：

module.exports = {
  apps: [{
    name: 'my-server',
    script: './bin/www',
    instances: 'max', // 根据 CPU 核心数自动扩展
    exec_mode: 'cluster',
    max_memory_restart: '1G'
  }]
};