关于实现vue项目的路由懒加载，以及一个坑

🤫 今天在实现SSR的时候，忽然想到可以实践一下vue-router的懒加载的机制，没想到跳进了一个坑，爬了半个小时才出来，所以记录一下，如果你看到这篇文章，希望你能避免跳进去，好，走起。

1. 废话少说，先看下官方文档，如果看不明白，可以继续看我写的例子。

路由懒加载的官方文档

2. 我的例子

• 1. 🤨 首先，你要有两个路由页面的组件，比如叫Main.vue，Detail.vue，具体什么意思就不说了，你肯定懂。
     路由页面
• 2. 🤨 在router/index.js中，原来导入页面是使用下面的方法：

import Router from 'vue-router'
import Vue from 'vue'

Vue.use(Router)

// 常规方法
import Main from './../components/Main'
import Detail from './../components/Detail'

export default new Router({
    mode: 'hash',
    routes: [
        {
            path: '/',
            component: Main // 常规方法
        },
        {
            path: '/detail',
            component: Detail // 常规方法
        }
    ]
})

• 3. 😎 修改成按需导入时，可以采用以下两种方案，具体的讲解请看官网文档

import Router from 'vue-router'
import Vue from 'vue'

Vue.use(Router)

// 先别删
import Main from './../components/Main'
import Detail from './../components/Detail'

export default new Router({
    mode: 'hash',
    routes: [
        {
            path: '/',
            // node（commonJs）语法
            component: r => require.ensure([], () => r(require('./../components/Main.vue')), 'main1')
        },
        {
            path: '/detail',
            // es6（import）语法
            component: ()=> import(/* webpackChunkName: "test" */ './../components/Detail.vue')
        }
    ]
})

• 4. 😱 此时，貌似已经按官网文档配好了，但是...没有效果啊！！

     
     没有效果，很尴尬
• 5. 😰 我一度怀疑是我哪里错了，当然，肯定是我错了。首先我怀疑是webpack没配置什么重点配置，查了一下，webpack仅仅为这个配置能配的就是给分出来的chunk起别名，但我还是给配上了，就像：

// vue.config.js
module.exports = {
    configureWebpack: {
        output: {
            chunkFilename: 'chunks/[name]-[chunkhash:8].js'
        }
    }
}

• 6. 🤮 还是不生效，因为我们就没分出chunk，这个配置就是把当前的chunk给别名了，哎，就简直是奇了个大怪了。
• 7. 🤬 我看上面那个注释里面的常规导入的两个import没有删除，我就顺手删除了，删除了之后，嘿，你猜怎么着？猜对了，就TM好了，我深深怀疑，组件编写者判断是不是要异步导入的时候，这么粗暴的吗！！！
• 8. 😎 删除掉上面没有删除的地方

import Router from 'vue-router'
import Vue from 'vue'

Vue.use(Router)

// 把这两行删了！！！！！
import Main from './../components/Main'
import Detail from './../components/Detail'

export default new Router({
    mode: 'hash',
    routes: [
        {
            path: '/',
            // node语法
            component: r => require.ensure([], () => r(require('./../components/Main.vue')), 'main1')
        },
        {
            path: '/detail',
            // es6语法
            component: ()=>import(/* webpackChunkName: "test" */ './../components/Detail.vue')
        }
    ]
})

• 9. 🤪 此时就有了效果，点击详情时，才去请求的test.xxx.js

     
     成功

🤓 总结：这真的是一个不曾想到的坑，不过也好，早跳一下，以后就可以绕道走了。