vue模块导入报错问题Module not found: Error:[CaseSensitivePathsPlugin]
更新时间：2023年06月06日 10:08:34 作者：Pisces_224
这篇文章主要介绍了vue模块导入报错问题Module not found: Error:[CaseSensitivePathsPlugin]，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue Module not found: Error:[CaseSensitivePathsPlugin]
今天学习vue项目练手时，出了一个小小的错误：
检查了下，发现自己在模块导入的时候没有和组件文件名大小写完全一致造成的。
改为上述，即必须和文件名一毛一样，大小写敏感，唉。
vue批量导入模块
在基于vue-element-admin的开发时，每添加一个路由文件就要到另外一个文件里import相应的模块，这样开发起来不友好，如果有一种方法批量导入这些新增的文件，开发起来就方便多了。
这时我们可以使用require-context()方法，详见。
我们约定一个规则就是路由文件由export default抛出路由配置，代码也是判断是否是由export default来筛选导入的。
src/utils/require-dir.js
export function requireDir(files, expendFiles = ['./index.js']) {
let list = []
files.keys().forEach(key => {
if (expendFiles.includes(entryFile)) return
// 必须是export default
if (files(key).default) {
list = list.concat(files(key).default)
}
})
return list
}src/router/index.js
// 获取module文件里的路由
import { requireDir } from '@/utils/require-dir.js'
const routers = requireDir(require.context('./module', true, ['./index.js'])
//然后使用 ...routers 添加到路由里边同样，mockapi也可以使用这种方法来批量导入文件。
值得注意的是直接使用require.context会报错（require.context is not a function），这是因为项目中webpack不认这个文件，我们可以通过外部导入来引用这个功能。
cnpm install --save-dev require-context
使用上述方法
mock/index.js
import { requireDir } from '../src/utils/require-dir.js'
const requireContext = require('require-context');
const apiList = requireDir(requireContext('../../mock', true, /\.js$/), ['index.js','mock-server.js'])
const mocks = [
... apiList
]要注意的是，此时requireContext的当前目录是node_modules/_require-context…根据当前目录找到mock
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了Vue模拟实现购物车结算功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
vue验证滑块功能,在生活中很多地方都可以见到,使用起来非常方便,这篇文章主要给大家介绍了关于vue实现滑块拖拽校验功能的相关资料,需要的朋友可以参考下2021-08-08
本文主要介绍了VUE3中watch和watchEffect的用法详解，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
本文主要介绍了vue实现两列水平时间轴的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
这篇文章主要介绍了Vue.js中Line第三方登录api实现代码，本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-06-06
这篇文章主要介绍了vue 解决data中定义图片相对路径页面不显示的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要给大家介绍了关于vue中如何使用echarts动态渲染数据的相关资料,echarts是一款基于JavaScript的开源可视化图表库,它通过简单的配置即可实现各种各样的可视化效果,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了vue中如何监听url地址栏参数变化问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
eslint是一个JavaScript的校验插件,通常用来校验语法或代码的书写风格,下面这篇文章主要给大家介绍了关于Vscode关闭Eslint语法检查的多种方式,文章通过图文介绍的非常详细,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了用vscode开发vue应用的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
最新评论