使用vue-router懒加载，代码如下：

但是npm run dev 的时候 babel-loader报错如下：

查阅各种资料终于解决。

问题原因：

这种情况下的 import 属于异步引用组件，需要特殊的babel-loader处理。

解决方法：

先安装babel用来编译import异步引用方法的模块 babel-plugin-syntax-dynamic-import

cnpm install babel-plugin-syntax-dynamic-import -D

在.bablerc中引入syntax-dynamic-import插件

  {
    "presets": ["env"],
    "plugins": ["syntax-dynamic-import"]
  }

参考资料：

https://webpack.docschina.org/guides/code-splitting/#动态导入-dynamic-imports-

https://segmentfault.com/q/1010000011576199

vue路由懒加载，babel-loader无法处理/使用 import的更多相关文章

  1. 【巷子】---vue路由懒加载---【vue】

    一.懒加载 也叫延迟加载或者按需加载,即在需要的时候进行加载,   二.为什么要使用懒加载 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要 ...

  2. vue路由懒加载及组件懒加载

    一.为什么要使用路由懒加载 为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题. 二.定义 懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载. 三.使用 常用的懒加载方式 ...

  3. Vue 路由懒加载， VueRouter一步完成Vue的路由懒加载 一行代码搞定懒加载

    Vue Router路由配置中的component里面配置即可 1 // 路由懒加载的方式加载组件 2 3 component: () => import('@/views/Detail'), ...

  4. vue 路由懒加载 resolve vue-router配置

    使用方法 component:resolve => require(['@/pages/About'],resolve) //"@"相当于".." 懒加载 ...

  5. vue 路由懒加载 使用，优化对比

    vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运 ...

  6. vue路由懒加载

    大项目中,为了提高初始化页面的效率,路由一般使用懒加载模式,一共三种实现方式.(1)第一种写法: component: (resolve) => require(['@/components/O ...

  7. 两段代码实现vue路由懒加载

    const Foo = () => import('./Foo.vue') const router = new VueRouter({ routes: [ { path: '/foo', co ...

  8. vue路由懒加载方式

    方式一:结合Vue的异步组件和Webpack的代码分析 const Home = resole => {require.ensure(['../components/Home.vue'],() ...

  9. vue路由懒加载 及import

随机推荐

  1. python函数：函数使用原则、定义与调用形式

    一.函数初始 二.函数的使用原则 三.函数的定义与调用形式 四.函数的返回值 五.函数参数的使用 一.函数初始 # 须知一: # 硬盘空间无法修改,硬盘中的数据更新都是用新的内容覆盖旧的内容 # 内存 ...

  2. zencart重置用户登录密码sql

    zencart重置用户ID为99的登录密码为aaaaaaa ;

  3. LIBUSB_TRANSFER_ERROR

    首先, 我的设备是一个KNX无线接受模块, 利用UART与主机相连, 看到的设备就是ttyUSBx 利用libusb写了一个程序, 调用同步I/O 的API, 即libusb_bulk_transfe ...

  4. 生成静态libevent

    INCLUDE C:\Program Files (x86)\Microsoft SDKs\Windows\v7.1A\Include D:\vs2013\VC\include LIB C:\Prog ...

  5. Django ：执行 python manage.py makemigrations 时报错 TypeError: __init__() missing 1 required positional argument: 'on_delete'

    原因 执行命令 python manage.py makemigrations 报错 TypeError: __init__() missing 1 required positional argum ...

  6. IDEA部署Tomcat报错：No artifacts marked for deployment

    刚开始碰到这个问题还被坑了,搞了好半天...所以我准备记录一下,走的弯路就不说了,因为我没图

  7. mysql增删查改练习

    建表 班级表 create table class( cid int auto_increment unique, caption varchar(32) not null default '' )c ...

  8. MessagePack Java Jackson 在不关闭输出流（output stream）的情况下序列化多变量

    com.fasterxml.jackson.databind.ObjectMapper 在默认的情况下在写出输入后将会关闭输出流(output stream). 如果你希望序列化多值变量在同一个输出流 ...

  9. [HEOI2016&TJOI2016] 排序（线段树）

    4552: [Tjoi2016&Heoi2016]排序 Time Limit: 60 Sec  Memory Limit: 256 MBSubmit: 2703  Solved: 1386[S ...

  10. k8s集群管理注意要点【持续更新】

    1.编写pod yaml文件时绑定调度标签,必须要给指定节点绑定标签,否则无法调度到指定节点上,报错: Events: Type Reason Age From Message ---- ------ ...