Electron+Vue3+Vuetify3项目使用v-select组件报错求助

使用Electron.js、Vue.js开发应用，搭配Vuetify3组件库，原本运行正常，但在卡片中添加v-select组件后，页面无任何内容显示，控制台出现报错。

环境配置（package.json） #

{
  "name": "ads_manager",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "electron:build": "vue-cli-service electron:build",
    "electron:serve": "vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps"
  },
  "main": "background.js",
  "dependencies": {
    "@mdi/font": "5.9.55",
    "core-js": "^3.8.3",
    "roboto-fontface": "*",
    "vue": "^3.2.13",
    "vuetify": "^3.0.0-beta.0",
    "webfontloader": "^1.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "electron": "^13.0.0",
    "electron-devtools-installer": "^3.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "vue-cli-plugin-electron-builder": "~2.1.1",
    "vue-cli-plugin-vuetify": "~2.5.8",
    "webpack-plugin-vuetify": "^2.0.0-alpha.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ],
  "title": "Gerenciador de Anúncios"
}

组件代码（App.vue） #

<template>
  <v-app>
    <v-app-bar app color="grey-darken-4" dark>
      <v-toobar-title class="px-4 text-h6">Title</v-toobar-title>
      <v-btn variant="tonal" prepend-icon="mdi-account-arrow-left" class="mr-2">Login</v-btn>
      <v-btn disabled variant="tonal" prepend-icon="mdi-account-arrow-right">Logout</v-btn>
      <v-avatar color="grey-darken-3" class="ml-4">
        <v-icon icon="mdi-account-circle"></v-icon>
      </v-avatar>
    </v-app-bar>
    <v-main>
      <v-card class="ma-5 bg-grey-darken-4 pa-5 rounded-lg"
      elevation="8"
      max-width="800"
      rounded="lg">
        <v-select
            label="Select"
            :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
            variant="outlined"></v-select>
        <v-btn type="buttom" variant="tonal" @click="processMidia">Ok</v-btn>
      </v-card>
    </v-main>
  </v-app>
</template>

控制台报错信息 #

Uncaught (in promise) TypeError: globalStack.at is not a function
at eval (stack.ts?654e:55)
at callWithErrorHandling (runtime-core.esm-bundler.js?d2dd:173)
at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?d2dd:182)
at ReactiveEffect.getter [as fn] (runtime-core.esm-bundler.js?d2dd:1750)
at ReactiveEffect.run (reactivity.esm-bundler.js?89dc:190)
at doWatch (runtime-core.esm-bundler.js?d2dd:1865)
at watchEffect (runtime-core.esm-bundler.js?d2dd:1671)
at useStack (stack.ts?654e:54)
at Object.setup [as _setup] (VOverlay.tsx?8bdc:149)
at setup (defineComponent.tsx?1991:58)

报错根源是Electron 13版本不支持ES2022新增的数组at()方法，而Vuetify 3 beta版本内部代码用到了该方法，导致兼容性问题。

有两种解决方式：

• 升级Electron版本：将Electron升级到16及以上版本（Electron 16基于Chrome 96，已原生支持at()方法），修改package.json中devDependencies里的electron版本号后，执行npm install更新依赖。
• 添加polyfill兼容：在项目入口文件（如main.js）顶部引入core-js的at()方法polyfill：

  import 'core-js/actual/array/at'
  

  同时建议升级core-js到^3.20.0及以上版本，确保polyfill覆盖完整。

另外，Vuetify 3 beta版本存在较多不稳定因素，建议升级到最新稳定版以避免其他潜在兼容问题。

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