Vue CLI构建bootstrap-vue-next报错问题求助

问题背景 #

我正将Vue2项目迁移至Vue3 Composition API，原项目基于Bootstrap，现改用bootstrap-vue-next适配Vue3。应用本地运行正常，但执行npm run build生产构建时，node_modules目录出现30+类型错误。已在tsconfig.json中排除node_modules并开启skipLibCheck配置，仍无法解决。

相关配置文件 #

package.json #

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fullcalendar/core": "^6.1.8",
    "@fullcalendar/daygrid": "^6.1.8",
    "@fullcalendar/interaction": "^6.1.8",
    "@fullcalendar/list": "^6.1.8",
    "@fullcalendar/resource-timegrid": "^6.1.8",
    "@fullcalendar/timegrid": "^6.1.8",
    "@fullcalendar/vue3": "^6.1.8",
    "bootstrap": "^5.3.1",
    "bootstrap-icons-vue": "^1.10.3",
    "bootstrap-vue": "^2.23.1",
    "bootstrap-vue-next": "^0.10.10",
    "core-js": "^3.8.3",
    "jwt-decode": "^3.1.2",
    "vue": "^3.2.13",
    "vue-class-component": "^8.0.0-0",
    "vue-router": "^4.2.4",
    "vuex": "^4.0.2",
    "vuex-persistent": "^0.0.1"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-typescript": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-typescript": "^9.1.0",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.0.3",
    "prettier": "^2.4.1",
    "sass": "^1.64.2",
    "sass-loader": "^13.3.2",
    "typescript": "~4.5.5"
  },
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "browser": true,
      "node": true,
      "vue/setup-compiler-macros": true
    },
    "extends": [
      "eslint:recommended",
      "plugin:@typescript-eslint/recommended",
      "plugin:vue/vue3-essential",
      "prettier"
    ],
    "parser": "vue-eslint-parser",
    "parserOptions": {
      "parser": "@typescript-eslint/parser",
      "ecmaVersion": "latest",
      "sourceType": "module"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

tsconfig.json #

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "jsx": "preserve",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ],
      "@assets/*": [
        "src/assets/*"
      ],
      "@images/*": [
        "src/assets/images/*"
      ],
      "@scss/*": [
        "src/assets/scss/*"
      ],
      "@modules/*": [
        "src/modules/*"
      ],
      "@components/*": [
        "src/components/*"
      ],
      "@mixins/*": [
        "src/mixins/*"
      ],
      "@router/*": [
        "src/router/*"
      ],
      "@store/*": [
        "src/store/*"
      ],
      "@views/*": [
        "src/views/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules",
    "/node_modules",
    "./node_modules"
  ]
}

解决步骤 #

• 移除冲突依赖：package.json中同时存在bootstrap-vue（Vue2专属）和bootstrap-vue-next（Vue3适配版），二者类型定义冲突。执行卸载：

  npm uninstall bootstrap-vue
  

• 确保skipLibCheck在构建阶段生效：Vue CLI的TypeScript构建可能会忽略tsconfig的部分配置，需在vue.config.js中显式添加：

  module.exports = {
    configureWebpack: {
      module: {
        rules: [
          {
            test: /\.tsx?$/,
            loader: 'ts-loader',
            options: {
              compilerOptions: {
                skipLibCheck: true
              }
            }
          }
        ]
      }
    }
  }
  

• 升级TypeScript版本：当前使用的typescript@~4.5.5版本较旧，无法兼容部分新库的类型定义。升级至兼容版本：

  npm install typescript@~4.9.0 --save-dev
  

• 清理依赖缓存：删除旧依赖文件后重新安装，避免缓存导致的版本冲突：

  rm -rf node_modules package-lock.json
  npm install
  

• 验证Bootstrap版本兼容性：bootstrap-vue-next@0.10.10适配Bootstrap5.x，当前bootstrap@5.3.1版本兼容，若仍有样式问题可尝试锁定到bootstrap@5.2.x版本。

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