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

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

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

{
"presets": [["@babel/preset-env", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}

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

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

{
"presets": ["@vue/app", ["@babel/preset-env", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}

这样就没问题了

.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. :before和::before的区别

    单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素.伪元素和伪类之所以这么容易混淆,是因为他们的效果类似而且写法相仿,但实际上 css3 为了区分两者,已经明确规定了伪类用一个冒号来表示, ...

  2. Python文件的读写

    一.写数据 f = open("hello.txt", "w") f.write("hello world python!") f.clos ...

  3. 4. Scala程序流程控制

    4.1 程序流程控制说明 在程序中,程序运行的流程控制决定程序是如何执行的,是我们必须掌握的,主要有三大流程控制语句,顺序控制,粉质控制,循环控制 温馨提示:Scala语言中控制结构和Java语言中的 ...

  4. java 多线程争抢资源死锁

    多线程争抢资源死锁的原理就是,A线程正在持有锁1却想获取锁2,B线程正在持有锁2却要获取锁1 代码如下: public class Main { static ReentrantLock lock1 ...

  5. Django ORM中datetiem数据类型字段无法对比处理办法

    在做商城项目中浏览足迹时,我利用浏览商品的ID和浏览的时间保存到browse表中,然后在我的足迹页面根据最近日期进行展示 条件:每天/个商品只能如一次表 后台代码如下: #存储浏览足迹到browse表 ...

  6. 关于Eureka客户端连接服务端报错问题Cannot execute request on any known server

    对于Eureka包这个错误问题:Cannot execute request on any known server,总的原因就是连接Eureka连接服务端的Url地址不对,Url地址不对很很多情况. ...

  7. excel表格获取汉字大写首拼函数(自定义宏)

    打开excel,按Alt+F11,插入-模块,复制粘贴下边的函数 Function pinyin(p As String) As String i = Asc(p) Select Case i Cas ...

  8. 立一个Flag吧

    以后在学习上遇到的问题以及解决办法,大部分都要记录在这里了,以备温故知新....就这样吧!

  9. phpstorm----------phpstorm如何安装和使用laravel plugin

    1.安装 2.安装成功以后,删除项目里面的.idea文件.然后关闭phpstrom,重新打开该项目,就会提示你 然后.idea里面就会生成 laravel-plugin.xml 文件.就可以使用直接C ...

  10. 搭建apache本地服务器·Mac

    1. 打开终端,开启Apache: //开启apache: sudo apachectl start //重启apache: sudo apachectl restart //关闭apache: su ...