Vue 项目工程化实战：Vite 配置、代码规范与自动化测试

快速概述

Vue 项目工程化旨在解决开发效率、代码质量与可维护性问题。本文聚焦 Vite 配置、代码规范与自动化测试三个核心环节，适用于需要搭建或优化 Vue 3 项目的开发者。前置环境要求：Node.js 16+、npm/yarn/pnpm 包管理器，并建议具备 Vue 3 与 JavaScript/TypeScript 基础。

核心概念与原理

Vite 基于原生 ES Module，利用浏览器解析 import 的能力，实现秒级冷启动与按需编译，开发体验远优于传统 Webpack 打包器。代码规范通过 ESLint（静态检查）与 Prettier（格式化）协同工作，前者保证代码质量，后者统一代码风格。自动化测试分为单元测试（Vitest/Jest）与端到端测试（Cypress/Playwright），分别验证函数逻辑与用户交互流程。

实战步骤与代码

1. 创建 Vite + Vue 3 项目

执行以下命令，选择 vue 模板（可加 ts 支持）：

npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install
npm run dev

2. 配置 Vite 别名与代理

在 vite.config.js 中设置 @ 指向 src 目录，并配置开发服务器代理：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': resolve(__dirname, 'src') } // 设置 @ 指向 src }, server: { port: 3000, open: true, proxy: { '/api': { target: 'http://API网关所在域名', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } } })

此配置可避免深层相对路径引用，并解决开发环境跨域问题。

3. 集成 ESLint 与 Prettier

安装依赖并初始化：

npm install -D eslint prettier eslint-plugin-vue @vue/eslint-config-prettier
npx eslint --init

在 .eslintrc.cjs 中启用 vue 插件与 prettier 规则，在 .prettierrc 中设置单引号、无分号等风格。

4. 配置自动化测试

安装 Vitest 与 Vue Test Utils：

npm install -D vitest @vue/test-utils jsdom

在 vite.config.js 中增加 test 配置，并编写组件测试示例：

import { mount } from '@vue/test-utils'
import HelloWorld from './HelloWorld.vue'
test('renders message', () => { const wrapper = mount(HelloWorld, { props: { msg: 'Hello' } }) expect(wrapper.text()).toContain('Hello') })

运行 npx vitest 即可执行测试。

常见坑点与优化

• 路径别名报错：编辑器提示 path 模块找不到，安装 @types/node 即可解决。
• 代理不生效：确认 target 地址正确，且 rewrite 规则匹配实际路径。
• ESLint 与 Prettier 冲突：使用 @vue/eslint-config-prettier 关闭冲突规则。
• 测试环境缺失：Vitest 需配置 environment: 'jsdom' 以模拟 DOM。
• 性能优化：使用 build.rollupOptions 做代码分割，开启 gzip 压缩，并利用 Vite 的依赖预构建缓存。