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

简介

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项目中的作用是类似的。接下来我说说怎么解决，还有解决的思路。

解决方案

通过报错信息我们不难看出，这一句报错实际上是ESLint的报错，我们写的代码从语法上根本没有任何问题，因此我们只需要在EsLint的配置文件中将响应的验证规则禁用即可，最终我在ESLint官网的文档中找到了这个。
https://eslint.bootcss.com/docs/rules/global-require
解决步骤是在Vue项目根目录中打开.eslintrc.js，在导出的设置的rules中，加上~~“global-require”: false"~~ global-require": 0 。之后关闭并重新编译或热部署vue应用就可以了。
.eslintrc.js的内容如下：

//这是.eslintrc.js里面的内容，如果项目中不包含这个文件可以新建一个
module.exports = {
    "env": {
        "browser": true,
        "es6": true,
        "node": true,
        "browser": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/essential"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],//其他的设置都是自动的
    "rules": {
    	//就是这一句，禁用import和require必须出现在顶层作用域的验证规则
        "global-require": 0//这里应该0代表off之前写错了写成了false
    }
};

在ESLint的配置文件中，我们在rules字段配置需要开启或者关闭的验证规则，ESlint所有可配置的规则在官网文档中列举如下：https://eslint.bootcss.com/docs/rules/。
如果你还希望禁用一些与vue文件相关的配置（例如去掉v-for的key验证），可以参考这个官网文档，https://eslint.vuejs.org/rules/。