项目内部已经有了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. Python 学习笔记3 变量-数字

    我们来具体了解下有关 number类型的变量的使用方式和含义. 在Python中的Number类型的变量包含以下几种: int: 通常我们所说的整数, 比如 1, 2 ,3 ,100, 3000 等等 ...

  2. Vs Code 中文包设置

    首先打开Vs Code 然后点击扩展 下载中文包 安装中文包 在没打开任何文件的时候我们可以看到一些提示 这个时候使用快捷键 Ctrl + Shift + P  (显示所有命令),然后选择" ...

  3. c# 存储过程取output 值

    DataAccess da = new DataAccess(); da.sqlPath = Config.Get("System", "dataCntString&qu ...

  4. 微信小程序轮播图组件 swiper,swiper-item及轮播图片自适应

    官网地址:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html index.wxml文件 indicator-d ...

  5. PySe-007-解决“Chrome正在受到自动软件的控制”

    python使用selenium启动chrome的代码如下所示: #!/usr/local/bin/python # -*- coding: utf-8 -*- from selenium impor ...

  6. linux内核态和用户态的信号量

    在Linux的内核态和用户态都有信号量,使用也不同,简单记录一下. 1> 内核信号量,由内核控制路径使用.内核信号量是struct semaphore类型的对象,它在中定义struct sema ...

  7. 使用tortoisegit工具git地址中带号码密码的拉取,以及使用这种方式后中途重置密码报git remote: HTTP Basic: Access denied 错误解决办法

    1. 在拉取git项目时可以在地址中直接指定号码密码如下就可以直接拉取下来 https://username:password@github.com   需要注意,因为在解析地址时是以@符号作为地址信 ...

  8. 【Bad Practice】12306 query

  9. OO第一单元表达式求导作业总结

    第一次作业 功能描述: 对输入的表达式进行求导计算和格式正误判断   思路: 一开始的想法是想写一个大正则找到一个通项式,通过这个多项式来判断WRONG FORMAT,结果发现正则写的总是不完善,会漏 ...

  10. windows下C++连接mysql

    平台:windows c/c++ 编译器:vs2017 项目设置:项目属性页: 1.C/C++ ->常规->附加包含目录->C:\Program Files (x86)\MySQL\ ...