ElementPlus的调试问题

最初的问题
ElementPlusResolver插件是怎么工作的，为什么以下两种环境都能运行？

• 我们用ElementPlus时文件在node_modules里
• 这个运行环境的文件在package里

其实关键点不在ElementPlusResolver解析器上。
上一回讲到unplugin-vue-components解析未被import的组件，根据文件库匹配并置换解析代码。
如果文件库没有匹配到，则会根据已配置的解析器进行解析，ElementPlusResolver解析器会解析到ElementPlus的组件，并置换解析代码，追加导入语句。
默认情况下，导入语句是这样的

import { ElLoadingDirective as __unplugin_directives_0 } from 'element-plus/es'

image.png

这个解释了我们在node_modules安装了ElementPlus时可以运行。
那么另一个问题

ElementPlus官方的调试运行环境的文件在package里
修改package目录为什么可以直接反映到play项目中

image.png

答案在这里：vite.config.ts

 resolve: {
      alias: [
        {
          find: /^element-plus(\/(es|lib))?$/,
          replacement: path.resolve(epRoot, 'index.ts'),
        },
        {
          find: /^element-plus\/(es|lib)\/(.*)$/,
          replacement: `${pkgRoot}/$2`,
        },
      ],
    }

viteconfig里进行了解析别名配置，将导入时的解析路径转向了package目录

image.png