VUE 3，离子6菜单组件显示黑屏

Question

使用Ionic的CLI设置了项目，除了某些Linter配置外，没有任何自定义。 问题：每次我尝试使用离子时，它都会打破整个页面。

• 页面组件：

<template>
  <ion-page>
    <ion-menu
      side="start"
      content-id="menuContent"
    >
      <ion-header>
        <ion-toolbar color="secondary">
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content padding>
        <ion-label>START MENU CONTENTS</ion-label>
      </ion-content>
    </ion-menu>
    <ion-router-outlet id="menuContent" />
  </ion-page>
</template>

<script>
  import {
    IonPage,
    IonRouterOutlet,
    IonContent,
    IonHeader,
    IonMenu,
    IonTitle,
    IonToolbar
  } from '@ionic/vue';
  import { defineComponent } from 'vue';

  export default defineComponent({
    name: 'index-page',
    components: {
      IonPage,
      IonRouterOutlet,
      IonContent,
      IonHeader,
      IonMenu,
      IonTitle,
      IonToolbar
    }
  });
</script>

结果（在浏览器和模拟器中相同）：嵌套菜单内容渲染，但是页面看起来像这样

如果我删除＆lt; ion-menu＆gt;组件，那么一切正常

我的package.json

{
  "name": "notes",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint:eslint": "./node_modules/.bin/eslint -c .eslintrc.js .",
    "lint:eslint:fix": "npm run lint:eslint -- --fix",
    "lint:stylelint": "./node_modules/.bin/stylelint --config stylelint.config.js .",
    "lint:stylelint:fix": "npm run lint:stylelint -- --fix"
  },
  "dependencies": {
    "@capacitor/app": "1.1.1",
    "@capacitor/core": "3.5.1",
    "@capacitor/haptics": "1.1.4",
    "@capacitor/keyboard": "1.2.2",
    "@capacitor/status-bar": "1.0.8",
    "@ionic/vue": "6.0.0",
    "@ionic/vue-router": "6.0.0",
    "core-js": "3.6.5",
    "vue": "3.2.21",
    "vue-router": "4.0.12"
  },
  "devDependencies": {
    "@capacitor/cli": "3.5.1",
    "@types/jest": "27.0.2",
    "@typescript-eslint/eslint-plugin": "5.6.0",
    "@typescript-eslint/parser": "5.6.0",
    "@vue/cli-plugin-babel": "~5.0.0-rc.1",
    "@vue/cli-plugin-e2e-cypress": "~5.0.0-rc.1",
    "@vue/cli-plugin-eslint": "~5.0.0-rc.1",
    "@vue/cli-plugin-router": "~5.0.0-rc.1",
    "@vue/cli-plugin-typescript": "~5.0.0-rc.1",
    "@vue/cli-plugin-unit-jest": "~5.0.0-rc.1",
    "@vue/cli-service": "~5.0.0-rc.1",
    "@vue/eslint-config-typescript": "9.1.0",
    "@vue/test-utils": "2.0.0-rc.16",
    "@vue/vue3-jest": "27.0.0-alpha.3",
    "@vuebits/bem": "1.2.2",
    "babel-jest": "27.3.1",
    "cypress": "8.7.0",
    "eslint": "8.4.1",
    "eslint-config-airbnb-base": "15.0.0",
    "eslint-plugin-unused-imports": "2.0.0",
    "eslint-plugin-vue": "8.2.0",
    "jest": "27.3.1",
    "npm-run-all": "4.1.5",
    "sass": "1.52.2",
    "sass-loader": "13.0.0",
    "stylelint": "13.13.1",
    "stylelint-config-rational-order": "0.1.2",
    "stylelint-config-standard": "22.0.0",
    "stylelint-order": "4.1.0",
    "stylelint-webpack-plugin": "2.1.1",
    "ts-jest": "27.0.7",
    "typescript": "4.3.5",
    "vue-auto-routing": "1.0.1",
    "vue-eslint-parser": "9.0.2"
  },
  "description": "An Ionic project"
}

我的vue.config.js

const VueAutoRoutingPlugin = require('vue-auto-routing/lib/webpack-plugin');
const { definePlugin } = require('./config/webpack/define-plugin');
const { linterPlugins } = require('./config/webpack/linter-plugins');
const { getWebpackAliases } = require('./config/webpack/aliases');

module.exports = {
  configureWebpack: config => {
    config.stats = 'normal';

    const routerPlugin = new VueAutoRoutingPlugin({
      pages: 'src/pages',
      importPrefix: '~/src/pages/'
    });

    config.plugins = config.plugins.concat([definePlugin, routerPlugin]);

    if (process.env.LINT_ON_BUILD === 'true') {
      plugins.push(...linterPlugins);
    }

    config.resolve.alias = { ...config.resolve.alias, ...getWebpackAliases() };
  }
};