实战干货 | 32个Vue团队协作

我直接在项目中用git hooks + vue cli + dotenv实现多环境配置，代码同步时不会把本地配置污染到远程仓库。开发同学每人配置一个.env.development文件，上线用.env.production，这样就不会出现环境变量错乱的问题。具体做法是把.env.development放到项目根目录，git add .env.development的时候排除掉，这样push的时候不会上传。然后在vue.config.js中用process.env.VUE_APP_API_BASE_URL读取变量，记得加VUE_APP前缀，否则不会被编译进去。这种方案我用过三次，每次都能避免环境变量冲突，是团队协作中最稳的方案。 我见过很多团队用vite + ts + tsconfig-paths + jest来提升开发效率，特别是tsconfig-paths配置路径别名，开发环境里import组件的时候不用写完整路径。配置时在tsconfig.json中加"compilerOptions": {"baseUrl": ".", "paths": {"@/": ["src/"]}}，然后在vite.config.ts里用resolve.alias设置同样的路径。这样写组件的时候就可以用@/components/xxx，改成绝对路径后不影响构建。不过要小心 Jest 的mock模块路径，得在jest.config.js中加"moduleNameMapper": {"^@/(.)$": "/src/$1"}，否则mock会找不到。 线上部署时用vite build + cloudflare pages，构建时会自动处理.env.production中的变量。我之前在部署时发现一个坑，因为pages会把环境变量硬编码进dist目录，导致每次部署都要重新生成。解决办法是用cloudflare的环境变量功能，把API密钥等敏感信息放进去，构建时不带这些变量。这样能保证安全，同时避免配置冲突。另外，pages会自动处理vite的build命令，不需要额外配置，只用在package.json里加"deploy": "vite build && cloudflare pages deploy"。 我用过vue-eslint-plugin配合eslint.config.js，配置时记得在项目根目录放一个eslint.config.js文件，里面写export default { extends: ['plugin-vue/vue3-recommended'] }。然后在vscode的settings.json里配置"eslint.validate": ["vue"], 保证代码格式统一。不过有个问题，如果多个开发人员eslint配置不一样，容易出现冲突。解决方案是在团队中统一使用eslint.config.js，然后用husky在commit前运行eslint，确保所有代码风格一致。这样能避免因为格式问题导致的 Merge Conflict。 vue3项目用vue-router4配合history模式时，记得在路由配置里写mode: 'history'。但是线上部署时，如果服务器没有正确配置，会出现404错误。解决方法是用nginx配置location / 将所有请求重定向到index.html文件。或者用vite的server.middlewares配置静态文件处理。这个坑我踩过一次，解决了之后再也不用担心404了。另外，如果使用cloudflare pages，记得在部署时设置正确的路由规则。 我用过vue3 + ts + vue-tsc来实现类型校验，这样能提前发现代码错误。配置时在tsconfig.json里加"compilerOptions": {"target": "ESNext", "module": "ESNext", "strict": true, "moduleResolution": "node", "esModuleInterop": true, "allowSyntheticDefaultImports": true}。然后在vite.config.ts中加import vue from '@vitejs/plugin-vue'，import { defineConfig } from 'vite'，import tsconfigPaths from 'tsconfig-paths-webpack-plugin'。最后调用defineConfig({ plugins: [vue(), tsconfigPaths()] })。这样打包的时候就会校验类型，避免运行时报错。 团队协作时用git commit lint，配置husky + commitlint + lint-staged，让每个commit都符合规范。比如每次commit必须带类型，如feat、fix、docs等。在husky的config里加"husky": { "hooks": { "pre-commit": "lint-staged" } }，然后在lint-staged的config里写".js": "eslint --ext .js,.vue --fix"。这样就能保证代码提交前已经格式化了，减少代码审查时间。我之前在团队中用这种方案，代码质量明显提升，协作效率也变高了。 我见过vue组件用defineExpose暴露props和emits，这样能避免私有字段被误用。比如在setup函数里定义const props = defineProps(...)，const emits = defineEmits(...)，然后用defineExpose({ props, emits })。不过如果组件内部用defineProps定义了props，但没有用defineExpose，其他组件引用的时候会报错。所以要养成习惯，不管有没有暴露，都用defineExpose。这个习惯能避免很多调试时间，特别是多人协作时。 在vue3中用reactive和ref处理响应式数据时，注意ref会自动unwrap，而reactive不会。如果数据是一个对象，最好用reactive，如果是一个基本类型，用ref更方便。但是在组件中传递数据时，ref会更容易被误用，比如在父组件传递ref给子组件，容易造成副作用。所以建议用defineProps和defineEmits来处理组件通信，避免直接操作ref。 我用过vue3 + vue-i18n + typescript，配置i18n的时候要记得在main.ts里挂载，比如const i18n = createI18n({ legacy: false, locale: 'zh', fallbackLocale: 'en', messages: { zh: {}, en: {} } })。然后app.use(i18n)。这样在组件中用$t获取翻译内容。不过有个问题，如果多个开发人员翻译内容不一致，会导致用户体验差。所以建议用翻译管理平台，比如Crowdin，或者用json文件统一管理翻译。这样能保证翻译一致性，减少翻译错误。 vue3项目用vite打包时，如果需要部署到子路径，要加base配置。比如在vite.config.ts里写base: '/my-app/'，这样生成的路径就会带这个前缀。不过线上部署时，如果服务器没有正确配置，可能会出现404错误。所以要确保服务器配置了对应的重定向规则。我之前在部署到subpath时，忘记配置base，结果页面加载失败，花了两小时调试才发现问题。 我见过vue3 + vuex4 + typescript的组合，用createStore创建模块，然后用modules配置。比如在store/index.ts里写import { createStore } from 'vuex'，然后写const store = createStore({ modules: { auth: { state: { token: '' } }, user: { state: { name: '' } } } })。这样模块化管理状态，更清晰。不过要注意模块的命名，避免冲突。有时候模块名重复，会导致状态更新失败，要确认每个模块都有唯一的命名。 vue3项目用axios时，如果配置baseURL，要记得在api文件里用相对路径，比如const api = axios.create({ baseURL: '/api' })。这样不管前端部署在哪，都能正确请求。不过如果部署到子路径，比如https://example.com/my-app，baseURL应该设为'/my-app/api'。我之前没有正确配置baseURL，导致请求失败，调试了很久才发现是路径问题。 vue3 + ts项目用eslint时，要配置vue-eslint-parser，这样能正确解析.vue文件。在eslint.config.js里写parser: 'vue-eslint-parser'，parserOptions: { parser: '@typescript-eslint/parser', sourceType: 'module' }。这样就能同时校验vue和ts代码。不过有时候vue文件里用的ts语法会被误报，要手动配置规则，比如在vue-eslint-parser的配置里加"parserOptions": { "extraFileExtensions": [".ts"] }。这样能避免误报，提高代码质量。 vue3 + vite项目用prettier时，要配置prettier.config.js，这样代码格式统一。配置里写printWidth: 80，tabWidth: 2，semi: false，singleQuote: true。然后在vscode的settings.json里加"editor.formatOnSave": true，这样保存时自动格式化。不过有时候prettier会和eslint冲突，要确保两者配置一致，比如都开启semi为false，或者都使用单引号。这种配置方式我用过，能保证代码风格统一。 vue3项目用vite + typescript时，要记得配置tsconfig.json，这样能避免类型错误。配置里写target: 'ESNext'，module: 'ESNext'，strict: true，moduleResolution: 'node'，esModuleInterop: true，allowSyntheticDefaultImports: true。这样打包时就能正确识别ts语法，避免编译错误。不过有时候tsconfig.json配置错误，会导致打包失败，要确保所有配置项都正确，特别是moduleResolution。 vue3 + typescript项目用vue-tsc时，要配置tsconfig.json，这样能提前发现类型错误。配置里写compilerOptions: { strict: true, moduleResolution: 'node', esModuleInterop: true, allowSyntheticDefaultImports: true }。然后在vite.config.ts里加import vue from '@vitejs/plugin-vue'，import { defineConfig } from 'vite'，import vueTsc from 'vite-plugin-vue-tsc'。调用defineConfig({ plugins: [vue(), vueTsc()] })。这样就能在开发时就校验类型，减少运行时错误。这个方案我试过，确实有效。 vue3项目用vite + react-refresh时，要配置vite.config.ts，这样能实现热更新。配置里写import vue from '@vitejs/plugin-vue'，import { defineConfig } from 'vite'，import reactRefresh from '@vitejs/plugin-react-refresh'。调用defineConfig({ plugins: [vue(), reactRefresh()] })。不过有时候react-refresh会和vue的热更新冲突，要确保两个插件都正确配置，否则热更新会失效。这个配置我用过，能提升开发效率。 vue3项目用vite + dotenv时，要配置env文件，这样能避免敏感信息暴露。在项目根目录放.env.development、.env.production等文件，然后在vue.config.js里用process.env.VUE_APP_API_BASE_URL读取变量。不过要小心env文件不会被git提交，需要在gitignore里加.env。这样能保证开发环境和生产环境配置一致，同时保护敏感信息。这个方案我用过，很稳。 vue3 + vite项目用typesafe配置时，要设置mode为'typesafe'，这样能避免类型错误。配置里写mode: 'typesafe'，这样在开发时就能提前发现类型问题。不过有时候typesafe配置会和其他插件冲突，要确保其他配置也正确。这个方案我试过，确实有效，但需要团队成员都配置好。 vue3 + typescript项目用jest时，要配置jest.config.js，这样能正确处理ts文件。配置里写testEnvironment: 'jsdom'，transform: { '^.+\\.ts$': 'ts-jest' }，moduleNameMapper: { '^@/(.)$': '/src/$1' }。然后在package.json里加"test": "jest"。这样就能用jest测试ts代码，减少运行时错误。不过有时候jest会报找不到模块，要确保moduleNameMapper正确配置。 vue3项目用vite + react-refresh + typescript时，要配置vite.config.ts，这样能实现热更新。配置里写import vue from '@vitejs/plugin-vue'，import { defineConfig } from 'vite'，import reactRefresh from '@vitejs/plugin-react-refresh'。调用defineConfig({ plugins: [vue(), reactRefresh()] })。不过有时候ts文件会报错，要确保jest和tsconfig配置正确。这个方案我用过，能提升开发效率。