使用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. 设置本地cookie 存session 保持长期有效

    <?php session_start(); // 启动Session $_SESSION['count']; // 注册Session变量Count isset($PHPSESSID)?ses ...

  2. DA_06_iptables 与 firewalld 防火墙

    8.1 防火墙管理工具 防火墙作为公网与内网之间的保护屏障,在保障数据的安全性方面起着至关重要的作用.主要功能都是依据策略对穿越防火墙自身的流量进行过滤.防火墙策略可以基于 流量的源目地址.端口号.协 ...

  3. linux基础—课堂随笔06_软件包管理

    软件包管理 rpm 包和包管理器 包的组成:  二进制文件.库文件.配置文件.帮助文件 程序包管理器:  debian: deb文件,dpkg包管理器  redhat:rpm文件,rpm包管理器  r ...

  4. PAT Basic 1044 火星数字 (20 分)

    火星人是以 进制计数的: 地球人的 被火星人称为 tret. 地球人数字 到 的火星文分别为:jan, feb, mar, apr, may, jun, jly, aug, sep, oct, nov ...

  5. 异步消息处理机制相关面试问题-handler面试问题详解

    什么是handler? 这个异常应该也就是引出handler的原因,也就是默认在非UI线程中是无法去更新UI的东东滴,那到底什么上handler呢? handler通过发送和处理Message和Run ...

  6. hdf5文件、tqdm模块、nunique、read_csv、sort_values、astype、fillna

    pandas.DataFrame.to_hdf(self, path_or_buf, key, **kwargs): Hierarchical Data Format (HDF) ,to add an ...

  7. Eclipse指定jdk启动

    在eclipse.ini文件中加入这一句话: -vm D:/Java/jdk/jdk1.8/jre/bin/server/jvm.dll

  8. Python-multiprocessing-Pool模块

    from multiprocessing import Pool import os import time import random def long_time_task(name): print ...

  9. [人物存档]【AI少女】【捏脸数据】时尚

    点击下载(城通网盘):3in1.zip 点击下载(城通网盘):存档.zip

  10. 2018 焦作网络赛 G Give Candies ( 欧拉降幂 )

    题目链接 题意 : 给出 N 个糖果.老师按顺序给 1~N 编号的学生分配糖果.每个学生要么不分.要么最少分一个.且由于是按顺序发放.那么对于某个有分到糖果的编号为 i 的学生.则 1~(i-1) 这 ...