element-ui 并未按需加载

[FoneQinrf]

Describe the bug

使用该插件按需引入element-ui，打包后把element-ui全量打包了，并未按需打包。

Reproduction

https://github.com/FoneQinrf/vite-vue2

System Info

System:
    OS: macOS 12.4
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Memory: 108.18 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
Binaries:
    Node: 14.19.0 - ~/.volta/tools/image/node/14.19.0/bin/node
    Yarn: 1.22.19 - ~/.volta/tools/image/yarn/1.22.19/bin/yarn
    npm: 6.14.16 - ~/.volta/tools/image/node/14.19.0/bin/npm
Browsers:
    Chrome: 104.0.5112.79
    Safari: 15.5

dependencies: 
    vite: 2.7
    vue: 2.7
    element-ui: 2.15.9
    unplugin-vue-components: 0.22.4

Used Package Manager

yarn

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guide.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• [X] The provided reproduction is a minimal reproducible of the bug.

[xuemanchi]

This is not a bug cause by this plugin. it is caused by the code

import { Loading } from 'element-ui'

To resolve it, you can import babel-plugin-component or change the import code to(which is the same logic for babel-plugin-component implement)

import Loading from 'element-ui/lib/loading'

[goblin-pitcher]

昨天也遇到这个问题，其实issue里已经解答了，不过提问的人说的比较笼统。 在vite里配置了这个插件之后，.vue的template里使用Element-ui就不用再走import->配Component的路线了，比如：

<template>
     <!-- 直接能显示，不用import了 -->
     <el-icon name="close" class="close-icon" ></el-icon>
</template>

<script>
// import {ElIcon} from 'element-ui';  <--这里再引入会重新沿着element-ui/index.js打包一遍，导致按需引入失败
export default {
  components: {
  },
}
</script>

<style scoped>

</style>

但是，插件只会匹配template中的元素，再给它加上对应的import；js里Vue.use(Loading)你再import { Loading } from 'element-ui',插件压根不会处理，所以还是得手动用按需引入import Loading from 'element-ui/lib/loading'