vue CLI异步组件报错import' and 'export' may only appear at the top level-程序员宅基地

技术标签: Vue  vue  JS  js  

简介

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/

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_26909801/article/details/105970679

智能推荐

simulink仿真demo临摹笔记之stateflow输出状态的状态值-程序员宅基地

文章浏览阅读1.9k次。一,临摹对象sf_abstemporal_ct功能:输出结果: 二,经验总结1,选中状态后,打开Properties...选择“Create data for monitoring”,即可自动生成一个输出变量。该变量为bool型,并且不可更改。...

苹果系统安装 php,mysql_mac13 安装 php-程序员宅基地

文章浏览阅读788次。换电脑或者环境的时候需要重新安装并配置php环境,所以写了个脚本来处理繁琐的配置等工作;这个脚本能够实现复制php和mysql陪配置文件,配置数据库;_mac13 安装 php

图像处理中使用多线程及图像分块实现加速运算_逐像素计算有什么加速方法-程序员宅基地

文章浏览阅读9.1k次,点赞5次,收藏61次。很多图像处理算法,编写完毕、调试正确后,就是漫长的算法优化。有些算法处理效果很棒,但是运算非常耗时,还是无法集成进产品给用户用。本文介绍的基于多线程和图像分块实现加速运算,只是众多加速方法的一种,比较容易编写和实现。_逐像素计算有什么加速方法

linux查看sqoop目录,Linux、hive、sqoop常用脚本-程序员宅基地

文章浏览阅读305次。一、Linux常用脚本1.查看进程ps -ef|grep -i tom2.SCP从远程复制到本地目录scp root@/172.19.2.75:/home/root/full.tar.gz /home/daisy/full.tar.gz3.查看目录pwd4.查看hadoop集群状态命令hadoop dfsadmin -report5.查看default getway命令route 或者 netst..._查找linux sqoop路径

全功TYPEC拓展坞方案设计AG9321|TYPEC转HDMI多功能拓展坞设计电路AG9321|扩展坞设计方案AG9321-程序员宅基地

文章浏览阅读1.6k次,点赞2次,收藏16次。USB Type-C属于“全功能”型,它不仅同时支持数据传输、DP视频输出和USB PD协议的充电功能,还支持更多其他的USB方面的拓展功能,比如TYPEC快充、RJ45千兆网口、TF卡、SD卡、VGA、3.5MM音频、USB2.0、USB3.0等拓展功能一并通过全功能的USB TYPEC拓展坞产品还实现。由于全功能USB Type-C原生支持PD,所以扩展坞身上的HDMI最高可以输出到4K分辨率,可同时接驳显示器和多款USB存储外设并同时使用,不会耗费额外的CPU资源。全功能扩展坞也同样需要集..._ag9321

提高C#编程水平的50个要点 之十四“用多个构造函数时,利用构造函数链”_多个构造函数 c# 执行-程序员宅基地

文章浏览阅读986次。在一个类中如果需要实现多个自定义构造函数,通常做法是在构造函数中实现各自的业务逻辑,如果这些业务逻辑的实现并非截然不同的话,显然不符合oop编程思想,极不利于维护,当然,我们也可以通过将相同的逻辑部分封装成一个方法,但还有一种更为合理简单的方法,下面就通过构造函数链来实现串联构造函数的简单示例。示例代码如下:public class Person{ _多个构造函数 c# 执行

随便推点

Solr6.0.0安装及solr的Core_冰峰客户端6.0怎么安装-程序员宅基地

文章浏览阅读3.5k次。解压solr6.0.0执行命令:root@hadoop-virtual-machine:/opt# tar zxvf solr-6.0.0.tgz​​​安装SOLR6.0.0创建应用程序和数据目录mkdir -p /data/solr /usr/local/solr创建运行Solr的用户并赋权​#groupa_冰峰客户端6.0怎么安装

JavaScript零基础入门 6:JavaScript数组详解_javascript 数组-程序员宅基地

文章浏览阅读7.3k次,点赞15次,收藏67次。一、垃圾回收(GC)当一个对象没有任何的变量或属性对它进行引用,此时我们将永远无法操作该对象,此时这种对象就是一个垃圾,这种对象过多会占用大量的内存空间,导致程序运行变慢,所以这种垃圾必须进行清理。在JS中拥有自动的垃圾回收机制,会自动将这些垃圾对象从内存中销毁,我们不需要也不能进行垃圾回收的操作,我们需要做的只是要将不再使用的对象设置null即可。二、数组(Array)1、什么是数组数组也是一个对象,它和我们普通对象功能类似,也是用来存储一些值的,不同的是普通对象是使用字符串作为属性名_javascript 数组

Android开发在代码中设置线性布局LinearLayout和相对布局RelativeLayout的各种属性_@suppresslint("resourcetype")-程序员宅基地

文章浏览阅读3.4k次。1,第一种情况是我完全不定义xml布局文件,布局文件完全是在Java文件中写出来,代码如下:import android.annotation.SuppressLint;import android.graphics.Color;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;impo..._@suppresslint("resourcetype")

第一章:线程与多线程_主线程伴随消亡-程序员宅基地

文章浏览阅读190次。1 2 10章是重点,3-9统称Servlet(有电子书资源)李玮玮,智能设备方向,java基础,计算机组成原理都可以问问题。Serviet是运行再服务器端小程序,主要负责业务逻辑操作。学完后可以实现一个简单网站。1.线程简介1.1程序、进程、线程程序是一段静态的代码,是应用软件执行的蓝本进程 * 是程序的一次动态执行过程 *,它对应了从代码加载、执行至执行完毕 的一个完..._主线程伴随消亡

阿里云上的Elasticsearch2.3.4 安装_/mnt/data/elasticsearch-data-2.3.4/logs/xmfczc-ess-程序员宅基地

文章浏览阅读401次。阿里云上的Elasticsearch2.3.4 安装阿里云的云服务器ECS的配置: 硬件:CPU: 1核 内存:2 GB (I/O优化)1Mbps系统:CentOS 7.2 64位_/mnt/data/elasticsearch-data-2.3.4/logs/xmfczc-essearch_index_indexing_slowl

Cisco PVLAN_pvlan主vlan怎么添加端口-程序员宅基地

文章浏览阅读830次。私有VLAN(PVLAN):为相同VLAN内不同端口提供隔离的VLANPVLAN 只能在VTP transparent模式配置两种:主VLAN(PrimaryVlan)辅助VLAN(SecondaryVlans)一个主VLAN 包含多个辅助VLAN。好处:减少VLAN 数量、减少了IP 子网的数量。secondary vlan 下:可以有island port 、commu..._pvlan主vlan怎么添加端口