使用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. BZOJ 1015 并查集&连通块

    很久以前,在一个遥远的星系,一个黑暗的帝国靠着它的超级武器统治者整个星系.某一天,凭着一个偶然的机遇,一支反抗军摧毁了帝国的超级武器,并攻下了星系中几乎所有的星球.这些星球通过特殊的以太隧道互相直接或 ...

  2. idea 启动ssm项目

    https://www.cnblogs.com/yeya/p/10320885.html https://www.cnblogs.com/chenlinghong/p/8339555.html

  3. angular8 集成swiper， 并将swiper封装成公共组件

    安装Swiper npm install swiper --save 或者 yarn add swiper --save 在angular.json文件添加swiper.js和swiper.css   ...

  4. Struct2的简单的CRUD配置和使用

    1. 首先是Struct2使用的jar包,可以在官网下载https://struts.apache.org/   ,其中包只要下面这些就够用了. 或者点击下面链接下载 链接:https://pan.b ...

  5. JDK8日期处理API(转)

    转载地址:http://www.cnblogs.com/comeboo/p/5378922.html 转载地址:http://blog.csdn.net/hspingcc/article/detail ...

  6. jquery bind()方法 语法

    jquery bind()方法 语法 作用:bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数. 说明:规定向被选元素添加的一个或多个事件处理程序,以及当事件发生时运行 ...

  7. 《剑指offer》算法题第十二天

    今天是<剑指offer>算法题系列的最后一天了,但是这个系列并没有包括书上的所有题目,因为正如第一天所说,这些代码是在牛客网上写并且测试的,但是牛客网上并没有涵盖书上所有的题目. 今日题目 ...

  8. POJ 2109 Power of Cryptography 数学题 double和float精度和范围

    Power of Cryptography Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 21354 Accepted: 107 ...

  9. vue中单选框与多选框的实现与美化

    我们在做一些页面时,可能会用到很多的单选框和复选框,但是原生的radio和checkbox前面的原型图标或方框样式不尽人意.于是,决定自己来实现单选框和复选框.我用的是vue,所以就用vue的方式实现 ...

  10. Android有进度条异步任务下载图片

    首先在AndroidMainifest中添加上网权限 ? 1 <uses-permission android:name="android.permission.INTERNET&qu ...