Vue3安装element-plus报错 exports is not defined

问题遇到的现象和发生背景

Vue3安装element-plus报错 exports is not defined

操作环境、软件版本等信息

请问如何解决的?

在Vue3中，使用element-plus时可能会遇到"exports is not defined"的报错。这是因为element-plus使用了ES6的模块化语法，而Vue3默认使用ESM模块化语法，两者不兼容。解决这个问题的方法是在项目中安装并使用@vue/cli-plugin-babel插件，该插件可以将ES6的模块化语法转换为ESM模块化语法，从而解决"exports is not defined"的报错。具体步骤如下：

1. 在项目中安装@vue/cli-plugin-babel插件：

npm install @vue/cli-plugin-babel --save-dev

2. 在项目的vue.config.js文件中配置@vue/cli-plugin-babel插件：

module.exports = {
  configureWebpack: {
    plugins: [
      require('@vue/cli-plugin-babel')
    ]
  }
}

3. 在项目中使用element-plus：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

通过以上步骤，就可以在Vue3中使用element-plus，并解决"exports is not defined"的报错。

经过查资料，这是使用了CommonJs写法，而在应用中并没有做相应的模块转换使得浏览器能够识别。而导致这个问题是因为balbel的配置文件.babelrc的问题：

需要改动.babelrc文件即可：

其中{ "modules": false }阻止了babel进行模块转换，所以，将modules删除。

然后再次npm run dev即可。