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

关于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的效果就能正常显示了。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值