第一步 安装插件
npm install --save-dev @babel/plugin-syntax-dynamic-import
第二部 在babel.config.js中添加插件
plugins: [
[
'component',
{
libraryName: 'element-ui',
styleLibraryName: 'theme-chalk'
}
],
// 实现路由懒加载插件
'@babel/plugin-syntax-dynamic-import'
]
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins:[
'@babel/plugin-syntax-dynamic-import'
]
}
第三步 将路由改为按需加载的形式
原来组件加载完之后即成为局部组件
{
path: '/product/:id',
name: 'product',
component: () => import('./pages/product.vue')
}