vue-cli3.0 路由懒加载

vue-cli3.0 路由懒加载

今天项目运行得时候，报了这么一个错误：@babel/plugin-syntax-dynamic-import，搜集资料发现是webpack4不支持动态引入文件。而路由懒加载就是动态引入文件，如：const Login = () => import("@/views/login")

• 首先，为什么需要路由懒加载，因为没有路由懒加载之前，是所有文件打包在一个js文件中，文件体积太大，而且所有路由在浏览器首次打开项目的时候会全部加载，浏览器加载比较慢，体验不是很好。路由懒加载就是按需加载的意思，只有在需要调用这个文件的时候才会加载这个文件，在打包的时候也会将文件分开打包，每个路由打包成一个文件，浏览器首次加载项目的时候也会比较快。

• 其次，怎样做可以实现路由懒加载。
  1. npm install @babel/plugin-syntax-dynamic-import -D
  2. 在项目根路径（与src同级）下创建文件 babel.config.js
  3. 在 babel.config.js 文件中写以下代码：

module.exports = {
     
    "presets": [
        "@vue/app"
    ]
}

4. 在路由中import动态引入文件，写入以下代码：

// /* webpackChunkName: "login" */  ->打包的时候，文件名称命名为login
new VueRouter {
      
	routes: [
		{
     
		    path: "/login",
		    name: "login",
		    component: import( /* webpackChunkName: "login" */ "@/views/login"),
		    hidden: true,
		    meta: {
     
		      title: "登录"
		    }
		  },
	]
	
}

5. 打包之后的文件目录如下图：