vue CLI异步组件报错import' and 'export' may only appear at the top level

月桦剑士

于 2020-05-07 13:37:27 发布

阅读量2.4w

点赞数 2

分类专栏： Vue JS 文章标签： vue js

本文链接：https://blog.csdn.net/qq_26909801/article/details/105970679

版权

本文介绍了在Vue CLI项目中遇到的异步组件import语法导致的ESLint报错问题。当使用`()=>import('./my-async-component')`时，会出现'import' and 'export' may only appear at the top level的错误。解决方案是修改ESLint配置文件`.eslintrc.js`，禁用`global-require`规则。通过在rules中添加`"global-require": 0`，然后重新编译或热部署应用，即可消除该错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介

Vue的官网中提到了有关异步组件的语法，链接如下：
https://cn.vuejs.org/v2/guide/components-dynamic-async.html　
可以使用require，也可以使用import，如果使用import，那么语法是这样的。

new Vue({
  // ...
  components: {
    'my-component': () => import('./my-async-component')
  }
})

这里的关键就是()=>import(’./my-async-component’)这一句，import函数会返回一个Promise，从而达到异步加载的效果。然后如果你和我一样是启用了ESLint的vue CLI项目的话，那么这样写就会得到一个报错，即：
import’ and ‘export’ may only appear at the top level。
意思是import和export没有放到全局（顶层块作用域），如果你使用的是require，那么应该也会报类似的错误，这里就不在探究，因为import和require在vue CLI项目中的作用是类似的。接下来我说说怎么解决，还有解决的思路。