最规范省力的方式是使用 create-vue 脚手架一键集成 Cypress，它自动生成适配 Vue 3 和 Vite 的配置；已有 Vite 项目需手动安装依赖、配置 cypress.config.ts 并设置 devServer 适配。
Vue 3 项目初始化时配置 Cypress 端到端测试，最规范、最省力的方式是使用官方脚手架 create-vue 直接集成，它会自动生成适配 Vue 3 和 Vite 的 Cypress 配置，避免手动踩坑。
用 create-vue 一键初始化（推荐）
这是 Vue 官方当前（2026年）主推的方式，比旧版 vue-cli 更轻量、更现代：
- 运行
npx create-vue@latest，按提示选择项目名称、包管理器等 - 关键一步：当出现 “Add E2E Testing with Cypress?” 提示时，输入
y确认 - 脚手架会自动安装
cypress、@cypress/vite-dev-server，并生成cypress/目录、cypress.config.ts和基础测试示例 - 完成后执行
npm run test:e2e（或pnpm test:e2e）即可启动 Cypress GUI
已有 Vue 3 + Vite 项目补装 Cypress
若项目已存在，且基于 Vite（非 Vue CLI），需手动接入，重点在开发服务器适配：
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
- 安装依赖：
npm install cypress @cypress/vite-dev-server --save-dev - 创建
cypress.config.ts，核心配置包含：
import viteDevServer from '@cypress/vite-dev-server'
export default defineConfig({
e2e: {
baseUrl: 'http://localhost:5173', // 匹配你本地 vite dev server 端口
setupNodeEvents(on, config) {
on('devserver:start', viteDevServer)
}
}
})
- 在
package.json中添加脚本："test:e2e": "cypress open"和"test:e2e:run": "cypress run" - 确保项目已启动（
npm run dev），再运行npm run test:e2e，Cypress 才能正确连接开发服务器
定位与稳定性关键设置
Cypress 在 Vue 3 项目中要稳定可靠，不能只靠默认行为：
- 组件内优先加
data-testid属性，例如：<button data-testid="login-btn">登录</button>，测试中用cy.get('[data-testid="login-btn"]')定位，避免依赖类名或文本变动 - 拦截 API 请求用
cy.intercept()替代过时的cy.route()，例如：cy.intercept('POST', '/api/login').as('loginReq')，后续cy.wait('@loginReq') - 对异步更新的 Vue 响应式内容（如 ref 或 computed 变化后渲染的 DOM），无需
cy.wait(1000)，Cypress 默认自动等待，但可加显式断言强化可靠性，如cy.get('.success-message').should('be.visible')
补充说明：不建议用 vue-cli-plugin-e2e-cypress
该插件面向 Vue CLI 项目，而 Vue 3 官方已转向 Vite。如果你的项目是 Vue CLI 构建，可用 vue add e2e-cypress，但会引入 Webpack 依赖，与 Vue 3 生态主流脱节，长期维护成本高，新项目请直接选 create-vue 或 Vite + 手动配置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
