首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue Module not found: Error:[CaseSensitivePathsPlugin]
vue模块导入报错问题Module not found: Error:[CaseSensitivePathsPlugin]
作者：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
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。