Vue3 + Element-plus 报错 require is not defined 处理问题

问题复现:

yarn dev 后报错如下:

app.js:358 Uncaught ReferenceError: require is not defined
at eval (index.mjs:4:30)
at Module../node_modules/@element-plus/icons-vue/dist/es/index.mjs (chunk-vendors.js:9072:1)
at webpack_require (app.js:355:33)
at fn (app.js:600:21)
at eval (icon.js:7:16)
at Object../node_modules/element-plus/lib/utils/vue/icon.js (chunk-vendors.js:7646:1)
at webpack_require (app.js:355:33)
at fn (app.js:600:21)
at Object../node_modules/element-plus/lib/utils/vue/index.js (chunk-vendors.js:7665:12)
at webpack_require (app.js:355:33)

解决方案:

1、在 .env.development文件中 删除 VUE_CLI_BABEL_TRANSPILE_MODULES = true

2、安装依赖 npm install babel-plugin-dynamic-import-node -S -D

3、在babel.config.js 中修改配置,没有就新建

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  // 新增
  env: {
    development: {
      plugins: ['dynamic-import-node']
    }
  }
}

4、重新运行

记:同样可以解决 element-plus/es/locale/lang/zh-cn 引入报错问题