简介

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/。

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

react 中使用import()实现按需加载报错解决方法 --‘import’ and ‘export’ may only appear at the top level
react 中使用import()实现按需加载报错解决方法 --'import' and 'export' may only appear at the top level 参考文章: (1)rea ...
vue/cli的安装报错以及解决问题的方法
一.在安装vue/cli的过程中,一直报错,通过翻译了解到是权限出现了问题? 解决方法:打开cmd管理员权限(华为快捷键ctrl+x),再次运行vue/cli安装代码(npm install -g @ ...
【解决】Parsing error: ‘import‘ and ‘export‘ may only appear at the top level报错
问题描述:在用webpack做代码分割,按需加载,动态导入时,eslint检查import报错,因为eslint不支持动态导入. 报错如下图: 解决方法: 1.下载包:npm i eslint-plu ...
vue3使用箭头函数导入异步组件报错Invalid VNode type: undefined的解决方案
import { defineAsyncComponent } from 'vue'export default {components: {Header: defineAsyncComponent( ...
vue导入xlsx-style组件报错Can‘t resolve ‘./cptable‘ in ‘xxx\node_modules_xlsx
官方给出了解决方案,我们只需要修改一下配置 vue2x版本就是有webpack配置就是在webpack.base.conf.js中加入下面这段 module.exports = {external ...
vue 引用组件报错——找不到组件的解决方案
vue在开发页面时引用组件报错在使用vue开发页面时报如下错,到处找问题,components的注入也是写正确的后来才发现是这里引入写错了,引入组件不能写{} 改成下面这种就可以了记录下工作中的 ...
Vue scss 引入变量报错
官网css引入配置参考文章我在项目里自定义了vue.config.js的rules关于scss的loader所以我是直接子啊loader配置options就可以 { test: /\.scss$/ ...
antd Datepicker组件报错 ——date.clone is not a function或者date1.isAfter is not a function
问题描述: antd Datepicker组件报错 --date.clone is not a function或者date1.isAfter is not a function 原因分析: 在Fro ...
【Vue】—异步组件
[Vue]-异步组件一. 组件引入方式:提前引入 import CompA from './components/CompA.vue'components:{CompA} 二. 异步引入 compo ...

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

目录

简介

解决方案

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

最新文章

热门文章