Vue3 迁移不是“改完代码就上线”，还要确保测试通过、发布流程顺畅、线上监控稳稳的。今天我们以一个真实项目为例，梳理 Vue3 升级后的测试、构建、部署和监控策略，帮你把最后一公里走稳。

🎯 升级完成后的 Checklist

• ✅ 单元测试覆盖核心组件。
• ✅ E2E 测试回归关键业务流程。
• ✅ TypeScript 类型检查无误。
• ✅ CI/CD 流程自动化。
• ✅ 线上监控告警配置完成。

🧪 单元测试：Vitest + Testing Library

安装：

npm install -D vitest @vitest/ui @vitejs/plugin-vue-jsx @testing-library/vue

配置 vitest.config.ts：

import { defineConfig } from 'vitest/config';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './tests/setup.ts',
  },
});

编写测试：

import { render, fireEvent } from '@testing-library/vue';
import OrderForm from '@/components/OrderForm.vue';

test('提交表单', async () => {
  const { getByPlaceholderText, getByText } = render(OrderForm);
  await fireEvent.update(getByPlaceholderText('请输入商品名'), 'Vue3 课程');
  await fireEvent.click(getByText('提交'));
  expect(getByText('提交成功')).toBeTruthy();
});

🧪 E2E 测试：Playwright

npm install -D @playwright/test
npx playwright install

示例测试：

import { test, expect } from '@playwright/test';

test('登录流程', async ({ page }) => {
  await page.goto('http://localhost:5173');
  await page.fill('input[name="username"]', 'admin');
  await page.fill('input[name="password"]', '123456');
  await page.click('button:text("登录")');
  await expect(page.locator('text=欢迎回来')).toBeVisible();
});

🧰 类型检查 + Lint

• npm run typecheck：

  {
    "scripts": {
      "typecheck": "vue-tsc --noEmit",
      "lint": "eslint --ext .ts,.vue src"
    }
  }
  

• 在 CI 中执行，保证类型和规范。

⚙️ CI/CD 流程（GitHub Actions 示例）

name: CI

on: [push, pull_request]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - run: npm install
      - run: npm run typecheck
      - run: npm run lint
      - run: npm run test
      - run: npm run build
      - name: Upload dist
        uses: actions/upload-artifact@v3
        with:
          name: dist
          path: dist

• 可配合 deploy workflow 发布到 OSS、Vercel、Netlify。

🌐 部署建议

Nginx 配置示例：

server {
  listen 80;
  server_name admin.example.com;
  root /var/www/app;

  location / {
    try_files $uri $uri/ /index.html;
  }
}

📈 监控与告警

• 前端监控平台：前端埋点（神策、GrowingIO、阿里云 ARMS）。
• 性能监控：Lighthouse CI、Web Vitals。
• 错误追踪：Sentry、LogRocket。
• 自建方案：window.onerror + 上传日志。

🧯 常见遗留问题

🏁 小练习

1. 给项目加上 npm run test:ui（Vitest UI），观察测试覆盖率。
2. 编写 Playwright 测试覆盖关键路径，接入 CI。