解决 Vue+TS 项目打包（vue-tsc -b && vite build）未使用变量提示 / 报错问题

在 Vue+TypeScript 项目中执行 vue-tsc -b && vite build 时，TypeScript 或 ESLint 常会因 "未使用的变量 / 参数" 触发报错或警告，导致打包中断或日志冗余。以下是分步解决方案，兼顾 "不阻断打包" 和 "灵活控制提示强度"，同时补充关键注意事项避免配置失效。

一、问题场景说明

当代码中存在以下情况时，打包可能受阻：

• 声明了 let/const 变量但未使用（如 const demo = 123）；
• 函数定义了参数但未在函数体内使用（如 function fn(unusedParam) {}）；
• ESLint 或 TypeScript 严格模式下，此类未使用项默认触发 "错误（Error）" 级别提示，中断 vue-tsc 类型检查或 vite build 流程。

二、方案一：修改 TypeScript 配置（控制 vue-tsc 检查规则）

TypeScript 本身提供配置项控制 "未使用变量 / 参数" 的检查逻辑，核心修改文件为 tsconfig.app.json （Vue 项目中针对 "应用代码" 的 TS 配置，非根目录 tsconfig.json 公共配置）。

1. 配置步骤

找到项目根目录下的 tsconfig.app.json，在 compilerOptions 中添加 / 修改以下两项：

json

{
  "compilerOptions": {
    // 关键配置：关闭未使用变量/参数的 TS 检查
    "noUnusedLocals": false,    // 控制未使用的局部变量
    "noUnusedParameters": false // 控制未使用的函数参数
  }
}

2. 关键参数说明

参数名	作用范围	配置值说明
noUnusedLocals	局部变量（let/const、函数内定义的变量等）	true：未使用则报错；false：不检查，不报错（推荐打包时用）
noUnusedParameters	函数 / 方法的参数	true：未使用参数则报错；false：不检查，不报错（推荐打包时用）

三、方案二：调整 ESLint 规则（避免额外警告）

若项目集成了 ESLint（Vue 项目默认集成），即使关闭了 TypeScript 检查，ESLint 的 no-unused-vars 规则仍可能触发警告 / 报错。需修改 .eslintrc.cjs （ESLint 配置文件，后缀可能为 .js 或 .json，以项目实际文件为准）。

1. 配置步骤

根据需求选择 "完全关闭" 或 "仅警告不报错"（推荐后者，兼顾打包和代码提醒）：

javascript

module.exports = {
  rules: {
    // 关键规则：处理未使用变量
    "no-unused-vars": "off", // 关闭 ESLint 原生的未使用变量规则
    @typescript-eslint/no-unused-vars": "off", // 关闭 TS 扩展规则
    "@typescript-eslint/no-unused-vars": [
      "warn", // 级别："off"=关闭，"warn"=警告（不阻断打包），"error"=报错（阻断打包）
      {
        // 可选：更灵活的例外配置（按需添加）
        "argsIgnorePattern": "^_", // 忽略以 "_" 开头的未使用参数（如 function fn(_unused) {}）
        "varsIgnorePattern": "^_", // 忽略以 "_" 开头的未使用变量（如 const _demo = 123）
        "caughtErrorsIgnorePattern": "^_" // 忽略以 "_" 开头的未使用捕获错误（如 try { ... } catch (_err) {}）
      }
    ]
  }
};

2. 规则级别说明

级别	效果	适用场景
off	完全不检查，无任何提示	临时紧急打包，忽略所有冗余提示
warn	未使用变量时显示警告（黄色日志），不阻断打包	日常开发 / 打包，保留代码提醒
error	未使用变量时触发错误（红色日志），阻断打包（ESLint 严格模式下默认）	要求代码绝对干净的生产环境

四、关键注意事项（避免配置失效）

1. 配置生效前提：重启进程

   修改 tsconfig.app.json 或 .eslintrc.cjs 后，需：

   • 关闭当前终端的开发 / 打包进程；
   • 重新执行 vue-tsc -b && vite build，确保配置被重新加载（否则可能沿用旧配置）。

2. 区分配置文件：不要改错文件

   • TypeScript 配置：优先修改 tsconfig.app.json（针对应用代码），而非根目录 tsconfig.json（公共配置，可能被其他模块继承）；
   • ESLint 配置：若项目无 .eslintrc.cjs，检查是否为 .eslintrc.js（ESM 模块，需用 export default）或 .eslintrc.json（JSON 格式，无注释）。

3. 不建议长期关闭检查：平衡打包与代码质量

   关闭 noUnusedLocals 和 no-unused-vars 仅建议作为临时解决方案（如紧急打包时）。长期关闭会导致：

   • 代码冗余（未使用变量占用内存）；
   • 潜在 Bug（如变量名拼写错误导致 "看似声明却未使用"）；
   • 团队协作代码风格混乱。
     推荐方案：打包时用 warn 级别保留提示，后续迭代中逐步清理未使用变量。

4. 特殊情况：Vite 日志过滤

   若配置后仍有冗余日志，可在 vite.config.ts 中添加日志过滤（针对 Vite 自身输出）：

   typescript

   import { defineConfig } from 'vite';
   import vue from '@vitejs/plugin-vue';
   
   export default defineConfig({
     plugins: [vue()],
     build: {
       // 可选：过滤 Vite 打包日志中的特定警告（需根据实际日志内容调整）
       chunkSizeWarningLimit: 2000, // 仅示例：调整 chunk 大小警告阈值，非直接过滤未使用变量
     },
     logLevel: 'warn' // 控制 Vite 日志级别：'info'（默认）、'warn'（仅警告）、'error'（仅错误）
   });

五、总结

1. 若 vue-tsc -b 因未使用变量报错：修改 tsconfig.app.json 的 noUnusedLocals 和 noUnusedParameters 为 false；
2. 若 ESLint 因未使用变量警告 / 报错：修改 .eslintrc.cjs 的 @typescript-eslint/no-unused-vars 为 warn 或 off；
3. 配置后需重启进程，长期建议保留 warn 级别以维护代码质量。