按需引入element-ui報錯

項目用的腳手架是 vue-cli 3
按照官方文檔按需引入組件： https://element.eleme.cn/#/zh-CN/component/quickstart

安裝 babel-plugin-component

npm install babel-plugin-component -D

vue-cli3搭建的項目中沒有 .babelrc 文件，我是直接寫在 babel.config.js文件中：

module.exports = {
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

運行項目，發現報錯，報錯信息如下：

在網上查閱資料對問題的解讀是這樣的：

項目是基於vue-cli 3.x的版本，並沒有官網的.babelrc文件，只有babel.config.js文件，而且項目不需要引入完整的element-ui，只需要引入部分，按官網的步驟安裝babel-plugin-component后在babel.config.js寫入內容，報錯

解決方案：

1.安裝@babel/preset-env

npm i @babel/preset-env -D

2.修改.babelrc文件，把es2015改成@babel/preset-env

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

然后重新執行 npm run serve，就可以了

參考鏈接：https://blog.csdn.net/zy21131437/article/details/108029284