一、前言1-1.三点变化：异步组件声明方法的改变：vue 3.x 新增一个辅助函数defineasynccomponent，用来显示声明异步组件
异步组件高级声明方法中的 component 选项更名为loader
loader绑定的组件加载函数不再接收resolve和reject参数，而且必须返回一个promise
1-2.引入辅助函数defineasynccomponent的原因：现在，在 vue 3 中，由于函数组件被定义为纯函数，异步组件定义需要通过将其包装在一个新的 defineasynccomponent helper 中来显式定义。
二、vue 2.x与vue 3.x定义比较2-1.异步组件/路由定义比较2-1-1.在 vue 2.x 中，声明一个异步组件只需这样：
const asyncpage = () => import('./views/home.vue')

2-1-2.在 vue 3.x 中，异步组件的导入需要使用辅助函数defineasynccomponent来进行显式声明。如下：
<template> <div> <h2>async components</h2> <p>异步组件测试</p> <child /> </div></template><script>import { defineasynccomponent } from 'vue'const child = defineasynccomponent(() => import('@/components/async-component-child.vue'))export default { name: 'async-components', components:{ 'child': child }};</script>
2-2.声明方式比较2-2-1.vue 2.x中异步组件的声明有更高级的声明方式。如下：
const asyncpagewithoptions = { component: () => import('./views/home.vue'), delay: 200, timeout: 3000, error: errorcomponent, loading: loadingcomponent}
所以，下面的异步组件声明：
const asyncpage = () => import('./views/home.vue')

等价于：
const asyncpagewithoptions = { component: () => import('./views/home.vue')}
2-2-2.vue 3.x中也可以这样声明异步组件。只是其中的component需要改为loader。如下：
const asyncpagewithoptions = defineasynccomponent({ loader: () => import('./views/home.vue'), delay: 200, timeout: 3000, error: errorcomponent, loading: loadingcomponent})
2-3.异步组件加载函数返回比较2-3-1.在vue 2.x中接收resolve和reject：
// 2.x versionconst oldasynccomponent = (resolve, reject) => { /* ... */}
2-3-2.在vue 3.x中始终返回promise：
// 3.x versionconst asynccomponent = defineasynccomponent( () => new promise((resolve, reject) => { /* ... */ }))
vue 3.x的异步组件加载函数将不再接收resolve和reject，而且必须始终返回promise。换句话说，在vue 3.x中，不再支持通过工厂函数接收resolve回调来定义异步组件。
// 在 vue 3.x 中不适用export default { components: { asyncpage: resolve => require(['@/components/list.vue'], resolve) },}
三、vue3实践提示： 如果是用vite工具来构建项目，在本地开发使用import做路由懒加载，可以正常加载，但是会报警告；打包到生产环境会报错，页面不会正常展示，可以使用以下两种方法来实现。
3-1.路由懒加载实现3-1-1.defineasynccomponent方法
// router/index.jsimport { defineasynccomponent } from 'vue'const _import = (path) => defineasynccomponent(() => import(`../views/${path}.vue`));const routes = [ { path: '/async-component', name: 'asynccomponent', component: _import('home'), }];
3-1-2.import.meta.glob方法
// 1.上面的方法相当于一次性加载了 views 目录下的所有.vue文件，返回一个对象const modules = import.meta.glob('../views/*/*.vue');const modules ={ "../views/about/index.vue": () => import("./src/views/about/index.vue")}// 2.动态导入的时候直接，引用const router = createrouter({ history: createwebhistory(), routes: [ // ... { path: 'xxxx', name: 'xxxxx', // 原来的方式，这个在开发中可行，但是生产中不行 // component: () => import(`../views${menu.file}`), // 改成下面这样 component: modules[`../views${filename}`] } // ... ],})
3-2.异步组件实现<template> <div> <h2>async components</h2> <p>异步组件测试</p> <child></child> </div></template><script>import { defineasynccomponent } from 'vue'const child = defineasynccomponent(() => import('@/components/async-component-child.vue'))export default { name: 'async-components', components:{ 'child': child }};</script>
以上就是vue3 vite异步组件及路由懒加载怎么应用的详细内容。