vue2路由懒加载解决import引入报错问题

默认加载：

// 测试页面
import HelloWorld from '@/page/testHomePage/home'
import Form from '@/page/testHomePage/form'
import FormSubmit from '@/page/testHomePage/FormSubmit'
import PushRouterPage from '@/page/testHomePage/routerPage'
import Newpage from '@/page/testHomePage/newpage'
import Table from '@/page/testHomePage/table'

使用：

        {
   
          path: '/Table',
          name: 'Table',
          component: Table,
          meta: {
   
            title: 'Table',
          }
        },

vue自带的懒加载模式

在引入vue组件的时候我们可以直接引入组件并使用，但是这样并不能进行懒加载，项目打开的时候，会默认加载所有的页面，这并不是我们需要的，我们可以使用vue自带的懒加载模式：

component: resolve => (require(["@/components/common/Home.vue"], resolve))

这个虽然可以实现按需加载 ，也有一个小缺陷，就是全部模块会打包到一个js中。

使用import引入

  {
   
      path: '/',
      component: () => import(/* webpackChunkName: 'Home' */ '@/components/common/Home.vue'),
      meta: {
   
        title: '自述文件'
      },
   }

这个使用项目如果报错，那就是我们import的问题
问题原因： import 属于异步引用组件，需要特殊的 babel-loader 处理
我们需要一个加载器：

npm i babel-plugin-syntax-dynamic-import -D

在项目根目录找到.bablerc文件，没有的话新建

{
   
  "plugins": [
    "syntax-dynamic-import"
  ]
}

多余的我没有添加，这个新加的loader直接这样用，改完保存，重启项目就ok。

/* webpackChunkName: ‘Home’ */

这句话的作用是将当前组件打入一个包中，多个webpackChunkName相同将会打入一个包中，避免了将全部组件打入一个js中。