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