使用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. 网络协议相关面试问题-TLS与SSL握手

    HTTPS是什么? HTTPS并不是一个单独的协议,而是对工作在一加密连接(SSL / TLS)上的常规HTTP协议.通过在TCP和HTTP之间加入TLS(Transport Layer Securi ...

  2. 在linux中创建新用户-再次安装python

    原来的阿里云python软件安装错了,用了root安装软件,搞得我后面的软件全部都要用root,软连接也搞不定,卸载也不好卸载.只能格式化,实例什么的都不用重建,系统也不用安装,直接创建用户就行了,磁 ...

  3. 第一天Beta冲刺

    这个作业属于哪个课程 <课程的链接> 这个作业要求在哪里 <作业要求的链接> 团队名称 <做个一亿的小项目> 这个作业的目标 完成第一天Beta冲刺 作业正文 .. ...

  4. Centos7网卡配置命令nmcli

    在配置Centos6时,大家第一想到的就是把networkManager这个服务关掉,让它消失,这个服务台太鸡肋了,不该起作用的时候经常起作用,给管理带来了不便,但是在Centos7当中network ...

  5. web添加学生信息（首发web）

    程序思路,先在JSP上画好页面,然后再创建一Servlet文件用于判断在网页上操作是否正确,还需要与数据库相连接,用DBUtile文件连接数据库,用Dao层来实现数据的增加,用Service来服务于D ...

  6. Python之文字转图片

    Pygame模块一览表: 引入pygame模块 ,若本机没有请自行pip install pygame #载入必要的模块 import pygame #pygame初始化 pygame.init() ...

  7. C#双缓冲解释

    C#双缓冲解释 简单说就是当我们在进行画图操作时,系统并不是直接把内容呈现到屏幕 C#双缓冲 上,而是先在内存中保存,然后一次性把结果输出来,如果没用双缓冲的话,你会发现在画图过程中屏幕会闪的很厉害, ...

  8. python---硬件序列号

    安装wmi : pip install wmi -i https://pypi.douban.com/simple 还要安装  pip install pywin32 import wmi c = w ...

  9. luoguP3371 【模板】单源最短路径

    P3371 [模板]单源最短路径 3K通过 10.7K提交 题目提供者 HansBug 标签 云端↑ 难度 普及/提高- 时空限制 1s / 128MB 题目描述 如题,给出一个有向图,请输出从某一点 ...

  10. flask框架（十）： 闪现

    一:闪现flash基本用法 # -*- coding: utf-8 -*- # @Author : Felix Wang # @time : 2018/7/5 9:34 from flask impo ...