关于vue使用自动导入时，使用element-ui的v-loading指令时，出现moudle not found的问题

问题描述

这几天为了实现一个加载界面的功能，我本来打算自己写一个加载界面，写起来也不难，但是想想之前用了那么多element-ui的内容，这个应该也有现成的可以拿来使用，我就找到一个叫loading的组件。很快啊！我就把他写到项目里面去了，手动导入了一下（因为用在了js代码里面貌似不会自动导入），然后build，准备看看效果如何，这时候就出现一个离谱的问题：Module not found: Error: Can’t resolve ‘element-plus/es/components/loading-directive/style/css’ in xxx，我开始直接

结果发现还是不行，我就开始慌了，我打开了node_moudles文件夹一级一级找下去node_modules\element-plus\es\components\loading\style，然后对照着把路径加进去。最后证实没有作用，错误还是没变。

问题的几种无效解决方案

这时候我就直接打开了我的百度，开始搜索答案，但是很多都是和我一样，直接import没有找到的moudle。这些方法就直接pass了。

后面我找到几个比较可靠的解决方案（虽然也没解决问题）

1.修改配置：

原文链接：http://t.csdn.cn/ym2t7
打开vue.config.js文件（vue3的项目），vue2可以去config文件夹下的index.js文件里看看（自动导入我不知道vue2能不能用）
在自动导入的时候，在ElementPlusResolver()中加上一句：{ importStyle: false }

moudle.export = defineConfig({
    
    
	...,
	configureWebpack: {
    
    
	    plugins: [
	      AutoImport({
    
    
	        imports: ['vue'],
	        resolvers: [
	          ElementPlusResolver({
    
     importStyle: false }),
	          IconsResolver(),
	        ],
	        dts: path.resolve(pathSrc,'auto-imports.d.ts'),
	      }),
	      Components({
    
    
	        resolvers: [
	          ElementPlusResolver({
    
     importStyle: false }),
	        ],
	        dts: path.resolve(pathSrc,'components.d.ts'),
	      }),
	      Icons({
    
    
	        compiler: 'vue3',
	        autoInstall: true
	      })
	    ],
 	},

这样虽然编译成功了，但是我自己写的一些组件的样式全部乱掉了，而且，loading点击之后效果也是没有成功加载。

2.resolve.extension属性

原文链接：https://www.php.cn/js-tutorial-385863.html
同样在vue.config.js的文件夹下边，修改webpack的resolve.extension属性,因为我们文件夹下面的样式的后缀是.mjs，加入个.mjs试试，说不定就是这里的问题，搞起！

module.exports = defineConfig({
    
    
  ...
  configureWebpack: {
    
    
    resolve: {
    
    
      extensions: ['.ts', '.js', '.vue', '.json', '.mjs']
    },
	...
  }
})

build！，…等了很长一段时间，爆红！还是不行。就在我崩溃的瞬间，我寻寻觅觅，终于找到一个问题描述的一模一样的文章，并且成功解决了这个问题，文章链接如下：http://t.csdn.cn/pCfKG

有效的解决方法：

1.更新依赖工具

原文链接：http://t.csdn.cn/pCfKG
这里是按需引入出现的问题，尝试更新依赖工具包：

 npm install unplugin-auto-import@latest unplugin-vue-components@latest --save-dev

直接在terminal中间运行就好了。
更新完后的版本：

更新完的版本之后再手动引入ElLoading和它的样式，这时候打包就没有问题了。
这之后再打包就没有任何问题了。
然后运行，这时候loading的效果就能正常显示了。