项目内部已经有了babel的配置文件babel.config.js

  1. module.exports = {
  2. presets: ["@vue/app"],
  3. };

然后由于要按需引入element-ui,就使用了babel-plugin-component,并且配置了.babelrc文件,如下(当然其中涉及到babel7,大家要安装@babel/preset-env,旧的babel-perset-es2015在babel7已经不支持了)

  1. {
  2. "presets": [["@babel/preset-env", { "modules": false }]],
  3. "plugins": [
  4. [
  5. "component",
  6. {
  7. "libraryName": "element-ui",
  8. "styleLibraryName": "theme-chalk"
  9. }
  10. ]
  11. ]
  12. }

然后发现页面中element-ui的按需引入没有生效,这就奇怪了,后来找了很多问题,发现原来是配置无法合并的问题,导致.babelrc文件的配置根本就没有生效。于是把配置放到了同一个文件就好了,

记得删除另外一份文件(babel.config.js)只保留一个配置文件(.babelrc)。

  1. {
  2. "presets": ["@vue/app", ["@babel/preset-env", { "modules": false }]],
  3. "plugins": [
  4. [
  5. "component",
  6. {
  7. "libraryName": "element-ui",
  8. "styleLibraryName": "theme-chalk"
  9. }
  10. ]
  11. ]
  12. }

这样就没问题了

.babelrc和babel.config.js的相同配置不能合并的更多相关文章

  1. 关于vue.config.js 的 proxy 配置

    关于vue.config.js 的 proxy 配置有的同学不怎么明白项目里面有的配置了 pathRewrite 地址重写,有的又没有进行配置?/* * proxy代理配置的说明 * *接口例子:/z ...

  2. [转] 如何写好.babelrc?Babel的presets和plugins配置解析

    什么是Babel The compiler for writing next generation JavaScript. 官网是这么说的,翻译一下就是下一代JavaScript 语法的编译器. 作为 ...

  3. 如何写好.babelrc?Babel的presets和plugins配置解析

    什么是Babel The compiler for writing next generation JavaScript. 官网是这么说的,翻译一下就是下一代JavaScript 语法的编译器. 作为 ...

  4. vue.config.js的常用配置

    const path = require('path') const glob = require('glob') const resolve = (dir) => path.join(__di ...

  5. vue-cli 3.x搭建项目以及其中vue.config.js文件的配置

    参考链接:https://www.cnblogs.com/wxh0929/p/11271551.html vue-cli3全面配置详解:https://www.jb51.net/article/150 ...

  6. 关于 vue.config.js 文件的配置

    相关文档: https://cli.vuejs.org/zh/config/#vue-config-js

  7. postcss.config.js配置文件的配置方法

    module.exports = { plugins: { 'autoprefixer': {}, } }

  8. webpack.config.js====配置babel

    参考:https://www.jianshu.com/p/9808f550c6a91. 安装依赖babel-loader: 负责 es6 语法转化babel-preset-env: 包含 es6.7 ...

  9. 关于自己配置有关webpack.config.js和vue项目搭建相关步骤

    ## Webpack的配置和使用 ### 安装 1. 全局安装 ``` npm install webpack -g ``` 2. 本地安装 ``` npm install webpack -D `` ...

随机推荐

  1. Good Introduction of Kerberos and RADIUS

    1. RADIUS https://baike.baidu.com/item/RADIUS/3073981?fr=aladdin http://www.h3c.com/cn/d_201309/9220 ...

  2. 新手上路、安装JDK教程

    按照以下的图片步骤,登录http://www.oracle.com 下载 JDK (J2SE)  JDK 1.0, 1.1, 1.2, 1.3, 1.4    1.5.(JDK5.0) → 支持注解. ...

  3. 2018-2019-2 20165225《网络对抗技术》Exp1 缓冲区溢出实验

    2018-2019-2 20165225<网络对抗技术>Exp1 缓冲区溢出实验 声明 虽然老师在邮箱中要求要把虚拟机名改为个人名字缩写,但是我的kali好像不是很听话...重启数次也没用 ...

  4. SpringBoot2.0+Mybatis-Plus3.0+Druid1.1.10 一站式整合

    SpringBoot2.0+Mybatis-Plus3.0+Druid1.1.10 一站式整合 一.先快速创建一个springboot项目,其中pom.xml加入mybatis-plus 和druid ...

  5. WAN口和LAN 口有什么区别

    WAN口不能够用来连接电脑. LAN(1.2.3.4)口只能够用来连接电脑. 拓展资料 路由器(Router),是连接因特网中各局域网.广域网的设备,它会根据信道的情况自动选择和设定路由,以最佳路径, ...

  6. Install Superset from Python3.6

    本文安装Superset大致分为以下部分: 在操作系统中安装相关依赖,我所用的操作系统为Centos6.5 安装Python3.6.6 安装Superset 详细步骤如下: 相关依赖的安装 yum i ...

  7. python基础之 正则表达式,re模块

    1.正则表达式 正则表达式:是字符串的规则,只是检测字符串是否符合条件的规则而已 1.检测某一段字符串是否符合规则 2.将符合规则的匹配出来re模块:是用来操作正则表达式的 2.正则表达式组成 字符组 ...

  8. try catch的使用场景

  9. std::function 的使用说明

    转自: https://www.cnblogs.com/heartchord/p/5017071.html //////////////////// std::function   参考资料 • cp ...

  10. net Core TOptions和热更新

    TOptions接口 net Core 项目有个appsettings.json文件,程序默认也是读取的这个文件,appsettings.json是一个配置文件 我们可以把appsettings.js ...