使用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. 【转】通过lombok带你读透Builder构建器

    原地址:https://www.jianshu.com/p/0d8fc3df3647?from=timeline&isappinstalled=0 很久之前,我在<effective j ...

  2. 一、传统MVC token验证方式

    一.传统MVC验证Token 推荐(https://www.cnblogs.com/xiaobai123/p/9242828.html) 自定义处理Jwt方式 1.新建JWT类 代码如下: using ...

  3. 四、指定Nginx启动用户

    一.nginx指定启动用户 1.参考宝塔的配置 解释:(linux权限管理) 指定用www用户启动nginx,如果你用root启动nginx,万一nginx有漏洞,被提权了,你服务器就GG了 所以指定 ...

  4. 将 spring boot 安装为 systemd 服务

    [root@ecs-11-132 system]# cat /etc/systemd/system/push-gateway-3.0.0.service [Unit] Description=app- ...

  5. sql 新增一个不为空的列

    ALTER TABLE dbo.FW_PATROL_TASK ADD CRUISE_TYPE INT; UPDATE FW_PATROL_TASKSET CRUISE_TYPE = 0; --设置新列 ...

  6. 小程序UI设计（7）-布局分解-左-上下结构

    FlexBox布局中的变幻方式很多,我们继续了解一个左-上下结构的布局分解  左边结构树中WViewRow下面有两个WViewColumn.WViewRow是横向排列,WViewColumn是纵向排列 ...

  7. mongo批量插入问题(insert_many,bulk_write)，spark df转json传入mongo

    https://blog.csdn.net/nihaoxiaocui/article/details/95060906 https://xuexiyuan.cn/article/detail/173. ...

  8. java8学习之Lambda表达式深入与流初步

    Lambda表达式深入: 在上一次[http://www.cnblogs.com/webor2006/p/8135873.html]中介绍Lambda表达式的作用时,其中说到这点: 如标红处所说,既然 ...

  9. php查找判断二维数组中是否含有某个值

    $arr = array( array('a', 'b'), array('c', 'd') ); in_array('a', $arr); // 此时返回的永远都是 false deep_in_ar ...

  10. python面向对象基础（三）内置方法 __xx__

    __str__和__repr__,__format__ 改变对象的字符串显示__str__,__repr__ 自定制格式化字符串__format__ #_*_coding:utf-8_*_ forma ...