使用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面向编程：阶段练习

    1.所有程序都因该使用面向对象来设计吗?为什么? 不是,面向对象编程优点是扩展性高,对程序员来说不需要关心具体的步骤,只需要调用对象功能,缺点是:程序的复杂度变高,整体的可控性比较低! 2.什么是对象 ...

  2. zabbix 自定义Key （六）

    1.在zabbix_agent端zabbix_agentd.conf配置文件中增加自定义Key(/usr/local/zabbix_agent/etc/zabbix_agentd.conf) ### ...

  3. python面向对象、类、socket网络编程

    类和对象 python3统一了类与类型的概念:类==类型:从一组对象中提取相似的部分就是类:特征与技能的结合体就叫做对象: 类的功能: 初始实例化: 属性引用: 1.数据属性: 2.函数属性: 对于一 ...

  4. vue组件开发练习--焦点图切换

    1.前言 vue用了有一段时间了,开发的后台管理系统也趋于完善,现在时间比较算是有点空闲吧!这个空闲时间我在研究vue的另外的一些玩法,比如组件,插件等.今天,我就分享一个组件的练手项目--焦点图切换 ...

  5. 原生 JS实现一个简单分页插件

    最近做的一个 PC端的需求,这个需求中有一个小点,页面底部有一块列表区域,这个列表的数据量比较大,需要进行分页控制,切换页码的时候,发送一个 ajax请求,在页面无刷新的情况下,实现列表数据的刷新,所 ...

  6. HTML实现背景颜色的渐变

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. Java-Dom4jHelper工具类

    import java.io.ByteArrayOutputStream; import java.io.File; import java.io.FileInputStream; import ja ...

  8. Codeforces Round #449 [ C/A. Nephren gives a riddle ] [ D/B. Ithea Plays With Chtholly ]

    PROBLEM C/A. Nephren gives a riddle 题 http://codeforces.com/contest/896/problem/A codeforces 896a 89 ...

  9. 强制数据类型转换之Number类型

    ㈠强制类型转换 1.定义:指将一个数据类型强制转换为其他的数据类型    类型转换主要指,将其他的数据类型,转换为String ,Number, Boolean ㈡将其他的数据类型转换为Number ...

  10. apache nginx 配置

    <VirtualHost *:80> ServerAdmin test@biuuu.com DocumentRoot E:\web\OTHER\test ServerName zjh.co ...