element-plus按需引入

        项目中只用到一个 element-plus组件？全局引入项目太重？按官网文档引入后报错？看这里就对了。

1、安装并引入 unplugin-element-plus （参考链接）

npm i unplugin-element-plus -D

// 以 vue.config.js 中的配置为例
module.exports = {
  configureWebpack: {
    plugins: [
      require('unplugin-element-plus/webpack')()
    ]
  }
}

此时可能出现第一个报错信息 Cannot find module 'unplugin-element-plus/webpack'

明明已经安装成功了，为啥找不到？ 检查一下node版本吧，unplugin-element-plus 要求 "node": ">=14.17.0"

2、按需引入组件

官网中给出的案例是这样的

import 'element-plus/es/components/message/style/css'
import { ElMessage } from 'element-plus'

 此时可能又出现一堆报错信息，比如 Can't reexport the named export 'looseEqual' from non EcmaScript module (only default export is available)

这可能是webpack版本问题导致，可在第一步的基础上再增加以下配置

// 以 vue.config.js 中的配置为例
module.exports = {
  configureWebpack: {
    plugins: [
      require('unplugin-element-plus/webpack')()
    ],
    module:{
      rules:[{
          test:/\.mjs$/,
          include:/node_modules/,
          type:'javascript/auto'
      }]
    }
  }
}

 至此，组件可以正常使用啦