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

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

在vant 中使用cell组件定义图标该图片和位置操作
这篇文章主要介绍了在vant 中使用cell组件定义图标该图片和位置操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
Vue项目依赖包安装及配置过程
这篇文章主要介绍了Vue项目依赖包安装及配置过程,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2023-12-12
如何让别人访问本地运行的vue项目
这篇文章主要介绍了如何让别人访问本地运行的vue项目，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
vue 2.1.3 实时显示当前时间,每秒更新的方法
今天小编就为大家分享一篇vue 2.1.3 实时显示当前时间,每秒更新的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue实现图片上传功能
这篇文章主要为大家详细介绍了vue实现图片上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-05-05
vue中使用element ui的弹窗与echarts之间的问题详解
这篇文章主要介绍了vue中使用element ui的弹窗与echarts之间的问题详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-10-10
关于element的表单组件整理笔记
这篇文章主要给大家介绍了关于element的表单组件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-02-02
vue使用swiper插件实现轮播图的示例
这篇文章主要介绍了vue使用swiper插件实现轮播图的示例，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下
2021-05-05
el-select单选时选择后输入框的is-focus状态并没有取消问题解决
这篇文章主要给大家介绍了关于el-select单选时选择后输入框的is-focus状态并没有取消问题的解决过程,文中通过图文以及代码示例将解决的办法介绍的非常详细,需要的朋友可以参考下
2024-01-01
Vitepress的文档渲染基础教程
这篇文章主要为大家介绍了Vitepress的文档渲染基础教程，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10