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"),这个是主要问题。

报错 Component “default“ in record with path “/“ is a Promise instead of a function that return ...相关推荐

[Vue Router warn]: Component “default“ in record with path “/xx“ is a function that does not return
[debug日记] [Vue Router warn]: Component "default" in record with path "/xxx" is a ...
小程序插件封装Component报错 Component is not found in path……或 component is not defined
小程序插件封装Component报错小白程序猿,小程序在封装插件的时候遇到 Component报错,解决方式. # 提示为Component is not found in path--解决方式:排 ...
vue3+cli4运行项目报错export ‘default‘ (imported as ‘VueRouter‘) was not found in ‘vue-router‘
vue3+cli4运行项目报错export 'default' (imported as 'VueRouter') was not found in 'vue-router' 1.解决方案: cli3 ...
openharmony编译报错ubuntu20.04按照官方文档，hb set报错为OHOS ERROR] Invalid vendor path: /home/openharmony/vendor
ubuntu20.04按照官方文档,hb set报错为OHOS ERROR] Invalid vendor path: /home/openharmony/vendor 作者:坚果公众号:" ...
vue3.0引入ant-design-vue报错 export ‘default‘ (imported as ‘Vue‘) was not found in ‘vue‘
vue3.0引入ant-design-vue报错 export 'default' (imported as 'Vue') was not found in 'vue' 报错如下解决办法根目录命令 ...
【已解决】Python安装TensorFlow报错“Consider adding this directory to PATH or, if you prefer to suppress this
[已解决]Python安装TensorFlow报错"Consider adding this directory to PATH or, if you prefer to suppress ...
CRMEB知识付费系统安装搭建【常见问题-19.支付宝支付报错invalid [default store dir]: /tmp/】
支付宝支付报错 invalid [default store dir]: /tmp/ 1.如果使用支付宝sdk,首先lotusphp_runtime 文件也要一起使用支付宝现在的php sdk中有 ...
用vue-cli创建项目后npm run serve 报错Component name “main“ should always be multi-word vue/multi-word-compo
1.报错 Component name "main" should always be multi-word vue/multi-word-component-names 原因: ...
idea 启动报错: Failed to create JVM.JVM.Path XXXXXXX\jbr\ 我的解决办法
idea 启动报错: Failed to create JVM.JVM.Path XXXXXXX\jbr\ 我的解决办法在 C:\Users\Administrator\AppData\Roamin ...

报错 Component “default“ in record with path “/“ is a Promise instead of a function that return ...

问题复现

原因分析与解决

报错 Component “default“ in record with path “/“ is a Promise instead of a function that return ...相关推荐

最新文章

热门文章