最近,在使用VScode开发Vue项目时,遇到引入组件首字母大小写修改导致terminal报错的问题,错误如下所示:

Module not found: Error: [CaseSensitivePathsPlugin] `/Users/xxx/src/components/ListItem/richList.vue` does not match the corresponding path on disk `RichList.vue`.

在项目启动状态,以新建组件RichList.vue为例。

假设我们的原计划是创建组件RichList.vue,但是不小心创建为richList.vue,在页面中引richList组件,如下:

<template>
  <div><rich-list /></div>
</template>

<script setup></script>

<style lang="scss" scoped></style>

在components.d.ts会自动生成一条引入,如下:

import '@vue/runtime-core'
export {}

declare module '@vue/runtime-core' {
  export interface GlobalComponents { 
    RichList: typeof import('./src/components/ListItem/richList.vue')['default']
  }
}

此时,我们发现程序正常运行,当发现组件名称不符合命名规范,将组件名字改为RichList.vue后,在terminal中看到下图中的报错,提示引入组件的路径不对。 

此时再次打开components.d.ts文件,发现RichList组件的import的路径并没有改变,依旧是首字母小写时候的路径,尝试直接删除components.d.ts引用,或者将./src/components/ListItem/richList.vue修改为./src/components/ListItem/RichList.vue,发现自动引入中的路径更新后还是会生成./src/components/ListItem/richList.vue,terminal依旧报错,经过试验,总结了两种解决上述报错的方案。

方法一:

组件名称增加新的单词变成新的组件名,此方法不仅是新建的组件适用,已经提交到git中的组件同样适用。

例如新组建名称TestRichList,引入组件:

<template>
  <div><test-rich-list /></div>
</template>

<script setup></script>

<style lang="scss" scoped></style>

components.d.ts将重新生成正确的引入,报错消失。

import '@vue/runtime-core'
export {}

declare module '@vue/runtime-core' {
  export interface GlobalComponents { 
    TRichList: typeof import('./src/components/ListItem/TestRichList.vue')['default']
  }
}

方法二:

不重新起名,仅修改大小写。此方法适用从未提交到git上的组件,已提交到git上的组件将不会生效(采用方法一)。

组件名字从richList.vue改为RichList.vue,重启服务,报错消失,且components.d.ts更新成正确的引用。

import '@vue/runtime-core'
export {}

declare module '@vue/runtime-core' {
  export interface GlobalComponents { 
    RichList: typeof import('./src/components/ListItem/RichList.vue')['default']
  }
}

Logo

前往低代码交流专区

更多推荐