Quasar+Vue3+TS项目：删除导入接口后仍可构建，如何禁止构建？

1. 强化TypeScript配置 #

修改项目根目录下的tsconfig.json，启用严格类型检查并设置错误时禁止输出产物：

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "skipLibCheck": false,
    "noEmitOnError": true // 核心：类型检测出错时直接终止编译，不生成产物
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

2. 配置Quasar构建时强制执行TS检查 #

若项目基于Vite #

• 安装依赖：

npm install vite-plugin-checker --save-dev

• 修改quasar.config.js（或quasar.config.ts），在Vite插件中添加检查配置：

import { checker } from 'vite-plugin-checker';

export default configure(function () {
  return {
    vitePlugins: [
      checker({
        typescript: true, // 启用TS类型检查
        vueTsc: true // 可选：开启Vue模板的TS检查
      })
    ]
  };
});

若项目基于Webpack #

• 安装依赖：

npm install fork-ts-checker-webpack-plugin --save-dev

• 在Webpack配置中引入插件：

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new ForkTsCheckerWebpackPlugin({
        async: false, // 同步执行检查，出错则终止构建
        typescript: {
          configFile: './tsconfig.json'
        }
      })
    ]
  }
};

3. 优化ESLint配置（可选） #

确保ESLint的TS规则严格生效，修改.eslintrc.js：

module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  rules: {
    '@typescript-eslint/no-unused-vars': ['error', { vars: 'all', args: 'after-used' }],
    '@typescript-eslint/no-explicit-any': 'error'
  }
};

同时在package.json的构建脚本中加入ESLint检查：

{
  "scripts": {
    "build": "eslint . --ext .vue,.js,.ts && quasar build"
  }
}

验证效果 #

删除ICut接口但保留代码中对该类型的引用，执行npm run build，此时会因类型错误直接终止构建，达到预期效果。

内容的提问来源于stack exchange，提问作者shvedovea