1.import动态导入
const Home = () => import( /* webpackChunkName: "Home" */ '@/views/Home.vue');
2.使用vue异步组件resolve
这种方式没有成功
//const 组件名 = resolve => require([‘组件路径’],resolve)
//(这种情况下一个组件生成一个js文件)
const Home = resolve => require(['../view/Home'],resolve)
3.使用webpack require.ensure()
const Home = () => require.ensure([], (require) => require('@/views/Home.vue'))
4.vue3的异步组件加载方式defineAsyncComponent
异步组件defineAsyncComponent加载不能用在首次展示或者首次重定向的页面
import { defineAsyncComponent } from 'vue'
const ExcelPreview = defineAsyncComponent(() =>
import( /* webpackChunkName: "ExcelPreview" */ '@/views/ExcelPreview.vue')
)
但是使用会报警告:暂时不知道为什么
[Vue Router warn]: Component "default" in record with path "/test" is defined using "defineAsyncComponent()". Write "() => import('./MyPage.vue')" instead of "defineAsyncComponent(() => import('./MyPage.vue'))".