在同时开发 uni-app 小程序和 Vue2 项目时，最头疼的就是 GitHub Copilot 生成的代码"串味"------ 明明要 Vue2 代码，却混进 uni-app 的 uni.request、rpx 单位，还要手动修改。
这篇文章分享一份专为 Vue2 定制的 .github/copilot.yml 配置文件，能让 Copilot 精准匹配 Vue2 + axios + Element-UI + SCSS + px 等技术栈，彻底告别代码串味问题。
一、配置文件适用场景
- 前端开发同时维护 uni-app 小程序和 Vue2 项目（避免代码风格混淆）；
- Vue2 项目技术栈：axios + Promise + Element-UI + SCSS + vue-router + vuex + px 单位；
- 希望 Copilot 生成代码时自动匹配技术栈，无需反复说明规则。
二、完整的 Vue2 专属 copilot.yml 配置
1. 文件创建步骤
- 在 Vue2 项目根目录 新建
.github文件夹（无则手动创建）； - 在
.github文件夹内新建copilot.yml文件； - 粘贴以下完整配置代码。
2. 配置代码（可直接复制）
yaml
# Vue2 项目专属 Copilot 配置（适配前端后台管理系统）
# 核心语言和框架
language: vue
framework: vue2
version: 2.7.x # 适配 Vue2 最新稳定版
# 核心技术栈（精准匹配需求）
libraries:
- element-ui # Element UI 组件库
- axios # 网络请求
- vue-router@3.x # Vue2 配套的路由版本
- vuex@3.x # Vue2 配套的状态管理（store）
- sass/scss # 样式预处理器
- promise # 异步处理
# 代码风格规则（强制匹配要求）
style:
# 样式相关
- style_lang: scss # 默认使用 SCSS 编写样式
- style_scoped: true # 样式自动添加 scoped 隔离
- css_unit: px # 强制使用 px 单位（禁用 rpx/rem）
# Vue 语法相关
- vue_api: options # 强制生成 Vue2 选项式 API（data/methods/mounted）
- avoid_composition_api: true # 禁用 Vue3 组合式 API
# 网络请求相关
- request_lib: axios # 默认用 axios 而非 uni.request/fetch
- async_pattern: promise # 异步逻辑优先用 Promise 而非 async/await（可选调整）
# 禁用 uni-app 相关内容（避免串味）
- avoid_uni_app_api: true # 禁止生成 uni.request/uni.showToast 等 uni-app API
- avoid_mini_program_api: true # 禁止生成小程序相关代码
# 项目类型和适配场景
project_type: web # 纯 Web 端（非小程序/APP）
targets:
- pc # 适配 PC 端
- h5 # 兼容 H5 端
# 额外规则（提升代码匹配度）
rules:
- 优先使用 Vue2 选项式 API（data/methods/computed/mounted）
- 样式文件默认使用 lang="scss" 且添加 scoped 属性
- 网络请求必须使用 axios + Promise 封装，禁止使用 fetch
- 状态管理使用 Vuex 3.x（store），命名规范为 this.$store
- 路由跳转使用 this.$router.push，禁止使用 uni.navigateTo
- 所有样式单位强制使用 px，禁止出现 rpx/rem/em
- 异步逻辑优先使用 Promise 链式调用（可根据需求改为 async/await）三、关键配置项解析
| 配置项 | 核心作用 |
|---|---|
framework: vue2 |
锁定核心框架为 Vue2，避免生成 Vue3/uni-app 代码 |
libraries 列表 |
明确依赖库，Copilot 优先使用 Element-UI/axios 等指定技术栈 |
style_lang: scss |
生成样式时自动添加 lang="scss"，无需手动指定 |
style_scoped: true |
样式标签自动加 scoped，避免样式污染 |
css_unit: px |
强制生成 px 单位，彻底杜绝 rpx（小程序）/rem 单位 |
vue_api: options |
强制生成 Vue2 选项式 API，禁用 Vue3 setup 语法 |
avoid_uni_app_api |
禁止生成 uni.request/uni.showToast 等 uni-app 专属 API，避免代码串味 |
request_lib: axios |
网络请求优先用 axios，而非 fetch/uni.request |
四、配置生效后的效果
配置完成后，在 Vue2 项目中使用 Copilot 时：
- 行内生成 ：输入
// 生成登录页，Copilot 自动生成：- Element-UI 表单组件 + scoped SCSS 样式（px 单位）；
- axios + Promise 封装的登录请求；
- Vue2 选项式 API（data/methods）；
- 路由跳转使用
this.$router.push。
- 聊天面板提问：无需反复说明技术栈，Copilot 会默认匹配上述规则，生成符合要求的代码。
五、合规声明
本文内容为个人学习总结，仅作工具使用分享，非官方文档。所有配置代码均为原创整理，仅供学习交流使用，无任何商业用途，不涉及 GitHub 官方源码、版权代码及商业机密，可放心使用。
六、结尾互动
你在使用 Copilot 开发 Vue2 项目时，还遇到过哪些代码"串味"的问题？欢迎在评论区交流～