vue3+vite2 抱错 vue-router.esm-bundler.js:72 [Vue Router warn]: Component “default” in record with path “/” is a Promise instead of a function that returns a Promise. Did you write “import(’./MyPage.vue’)” instead of “() => import(’./MyPage.vue’)” ? This will break in production if not fixed.

问题复现

• 浏览器端console抱错

vue-router.esm-bundler.js:72 [Vue Router warn]: Component "default" in record with path "/" is a Promise instead of a function that returns a Promise. Did you write "import('./MyPage.vue')" instead of "() => import('./MyPage.vue')" ? This will break in production if not fixed.

• terminal终端没报错
• router代码如下

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "Home",
    component: import(/* webpackChunkName: "about" */ "../views/Home.vue"),
  },
  {
    path: "/about",
    name: "About",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/about.vue"),
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;

原因分析与解决

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "Home",
    component: () => import(/* webpackChunkName: "home" */ "@/views/Home.vue"),
  },
  {
    path: "/about",
    name: "About",
    component: () =>
      import(/* webpackChunkName: "about" */ "@/views/about.vue"),
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;

• webpackChunkName没有区分
• component的引入格式为() => import(/* webpackChunkName: "about" */ "@/views/about.vue"),这个是主要问题。