vue项目打包优化--路由懒加载
同过路由懒加载可以实现vue组件按需加载,缩短首次进入等待时间
vue 路由懒加载的配置示例如下:
import Vue from 'vue'
import Router from 'vue-router'
import { resolve } from 'path';
Vue.use(Router)
export default new Router({
routes: [{
path: '/baseMain',
component: resolve => require(['@/components/projectManage/baseMain'],resolve),
children: [
{
name:'projectList',
path: '/projectList',
component: resolve => require(['@projManage/projectAdmin/projectList'],resolve),
},
{
name:'projectDetails',
path: '/projectList/projectDetails',
component: resolve => require(['@projManage/projectAdmin/projectDetails'],resolve)
},
{
name:'frontResource',
path: '/frontResource',
component: resolve => require(['@projManage/resourceManage/frontResource'],resolve)
},
{
name:'backResource',
path: '/backResource',
component: resolve => require(['@projManage/resourceManage/backResource'],resolve)
},
{
name:'checkIndicator',
path: '/checkIndicator',
component: resolve => require(['@projManage/indicatorManage/checkIndicator'],resolve)
},
{
name:'publicProject',
path: '/publicProject',
component: resolve => require(['@projManage/projectAdmin/publicProject'],resolve)
},
{
name:'myWareHouse',
path: '/myWareHouse',
component: resolve => require(['@projManage/codeHouse/myWareHouse'],resolve)
},
{
name:'warehouseSet',
path: '/warehouseSet',
component: resolve => require(['@projManage/codeHouse/warehouseSet'],resolve)
},
{
name:'deployedApp',
path: '/deployedApp',
component: resolve => require(['@projManage/applicationDeploy/deployedApp'],resolve)
},
{
name:'createDeploy',
path: '/createDeploy',
component: resolve => require(['@projManage/applicationDeploy/createDeploy'],resolve)
},
{
name:'selectionApp',
path: '/appShop/selectionApp',
component: resolve => require(['@projManage/applicationShop/selectionApp'],resolve)
},
{
name:'selectAPP',
path: '/appShop/selectAPP',
component: resolve => require(['@projManage/applicationShop/selectAPP'],resolve)
},
{
name:'submitApp',
path: '/appShop/submitApp',
component: resolve => require(['@projManage/applicationShop/submitApp'],resolve)
},
{
name:'systemSet',
path: '/systemSet',
component: resolve => require(['@projManage/advancedSetup/systemSet'],resolve)
},
{
name:'personalSet',
path: '/personalSet',
component: resolve => require(['@projManage/advancedSetup/personalSet'],resolve)
},
{
name:'createProject',
path: '/projectList/createProject',
component: resolve => require(['@projManage/projectAdmin/createProject'],resolve)
},
{
name:'createProjectFrame',
path: '/projectList/createProject/createProjectFrame',
component: resolve => require(['@projManage/projectAdmin/createProjectFrame'],resolve)
},
{
name:'selectBackFrame',
path: '/projectList/createProject/createProjectFrame/selectBackFrame',
component: resolve => require(['@projManage/projectAdmin/selectBackFrame'],resolve)
},
{
name:'importIndicators',
path: '/projectList/createProject/createProjectFrame/selectBackFrame/importIndicators',
component: resolve => require(['@projManage/projectAdmin/importIndicators'],resolve)
},
{
name: 'individuation',
path: '/projectList/createProject/createProjectFrame/selectBackFrame/importIndicators/individuation',
component: resolve => require(['@projManage/projectAdmin/individuation'],resolve)
},
{
name: 'checkProject',
path: '/projectList/createProject/createProjectFrame/selectBackFrame/importIndicators/individuation/checkProject',
component: resolve => require(['@projManage/projectAdmin/checkProject'],resolve)
},
{
path:'/',
redirect:'/projectList'
}
]
},
{
name:'mainContent_edit',
path: '/mainContent',
component: resolve => require(['@/components/main_content'],resolve)
},
{
name:'login',
path: '/login',
component: resolve => require(['@projManage/login'],resolve)
},
{
path:'*',
redirect:'/login'
}
]
})

浙公网安备 33010602011771号