这篇文章上次修改于 834 天前,可能其部分内容已经发生变化,如有疑问可询问作者。

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

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

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

{
  "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"
      }
    ]
  ]
}

这样就没问题了