Vue cli3.0來實現路由懶加載

1.在vue-cli3.0里面使用路由懶加載需要安裝syntax-dynamic-import插件

npm install --save-dev @babel/plugin-syntax-dynamic-import
yarn add @babel/plugin-syntax-dynamic-import --dev

2.vue-cli3將.babelrc文件替換成了babel.config.js文件，所以webpack的操作要在這里面修改

"plugins": [
        [
          "component", {
            "libraryName": "mint-ui",
            "style": true
            },
            "syntax-dynamic-import"
        ],
    ]

上面的名字，位置一定要寫對，這個坑我替你們先踩了，別按照官網來就行

3.修改路由配置

component:()=>import(/*webpackChunkName:"name"*/"@/views/home.vue")

這里面的注釋可以被解析的，里面的name就是你打包之后的名字，在這里的webpack版本要大於2.4，這個不必要擔心，vue-cli3搭的項目肯定符合要求

4.打包完成之后就是對個js文件，多個css文件

5.打包完成之后還是單個js文件？

這個問題我也碰見了，參考大佬的博客https://www.cnblogs.com/cckui/p/10330563.html，也就是我上面的代碼還是不行

這個問題出在哪里我也不知道，我是剛開始不成功，試了很多次，最后還是這個代碼成功了，很奇怪，你要是不成功就多試幾次就OK了