syntax-dynamic-import实现懒加载
1 npm install --save-dev @babel/plugin-syntax-dynamic-import
2 在根目录新建一个babel.config.js文件 (注意:本实例采用vuecli3)如果没安装ui组件库作如下配置:
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
],
"plugins": [
[
'@babel/plugin-syntax-dynamic-import'
]
]
}
如果安装了相关ui组件库则作如下配置
在根目录新建一个babel.config.js文件 (注意:本实例采用vuecli3)
module.exports = {
"presets": [
"@vue/app"
],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
},
"syntax-dynamic-import"
]
]
}
特别注意"syntax-dynamic-import"在plugins中的顺序。plugins[0][1]必须是对象或者undefinde或者null。如果syntax-dynamic-import 位置放的不对将会报错
3 在router.js文件中路由作如下配置
const routes = [
{
path: '/',
name: 'initPage',
component: ()=>import(@v/InitPage/index.vue'),
},
{
path: '/loading',
name: 'loading',
component:()=> import(/'@v/loading/index.vue')
},
{
path: '/login',
name: 'login',
component: ()=> import(/'@v/loading/login.vue')
},]
注意。因为我再webpack中做了路径的别名配置
@v实际上的路径是src/views
但是如果每次都要写成
()=> import(/'@v/loading/login.vue')是不是显得有些多余?我们可以封装一个函数:
const getComponents =(name,title)=>{
console.log("name:",name)
if(!title){
return () =>import(`@v/${name}/index.vue`)
}else{
return () =>import(`@v/${name}/${title}.vue`)
}
}
这样代码就可以如下: