为什么需要懒加载？
像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时
理解了一下就是按需加载
路由分为几个部分
第一个部分 登录页
第二部分 登录成功后跳转的部分，common（公共的单页）
然后就是根据你的菜单结构，自定义的路由
路由懒加载
路由懒加载的方法，component: resolve => require(['../common/common'],resolve),
import Vue from 'vue'
import Router from 'vue-router'
// import Login from '@/components/Login'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
redirect:'/login'
},
{
path:'/study',
component: resolve => require(['../common/common'],resolve),
children:[
{
path:'/',
name: 'Study',
component: resolve => require(['../components/study/study'],resolve)
},
{
path: '/study/css',
name: 'Css',
component: resolve => require(['../components/study/css'],resolve)
},
]
},
{
path: '/mobile',
component: resolve => require(['../common/common'],resolve),
children: [
{
path:'/',
name: 'mobile',
component: resolve => require(['../components/mobile/firstExperince.vue'],resolve)
},
]
},
{
path:'/login',
name:'Login',
component: resolve=> require(['../components/Login'],resolve)
}
]
})
浏览器兼容问题
上述的懒加载其实有一个浏览器兼容性的问题，就是我在360，qq这些浏览器下面路由渲染的内容是不显示的，
有两种方法可以解决
第一种 再index.html里面引入polyfill.min.js
<script src="https://cdn.bootcss.com/babel-polyfill/6.23.0/polyfill.min.js"></script>
第二种，先安装，在配置
安装
npm install babel-polyfill --save
在webpack.base.conf.js中配置
entry: {
app: ['./node_modules/babel-polyfill/dist/polyfill.js','./src/main.js']
},
打包报错问题解决
image.png
找到build下面的webpack.prod.conf.js 添加 publicPath："./",
