Vite启动服务时相对路径导入模块解析失败问题咨询

问题表现 #

使用Vite作为构建工具启动开发服务时，触发模块解析报错：

Internal server error: Failed to resolve import "./store" from "src\main.ts". Does the file exist?

触发报错的导入代码：

import store from "./store";

将导入路径修改为@别名路径后，错误消失：

import store from "@/store";

但使用../开头的相对路径导入时，仍会出现同类报错：

Failed to resolve import "../utils/directives/ClickOutSide" from "src\views\Main.vue". Does the file exist?

对应项目目录结构如下：

-src
  -- store
     -- index.ts
  -- router
     -- index.ts
  -- main.ts

问题根因 #

• 相对路径解析易受干扰：Vite解析相对路径时，会基于当前文件的实际位置计算目标路径，一旦文件挪动位置、相对层级书写错误、路径中混用Windows反斜杠\和Web通用正斜杠/，就会出现路径拼接错误，直接找不到目标文件。
• 目录导入默认解析规则匹配失败：当导入路径指向一个目录而非具体文件时，Vite需要按配置查找目录下的入口文件（默认是index.xxx），如果项目没配置全需要识别的文件后缀、没指定目录入口文件名，就会出现无法识别目录下index.ts的情况。
• 文件名大小写不匹配：如果导入时写的文件名大小写和实际磁盘上的文件名不一致，在大小写敏感的系统（如Linux）下会直接解析失败，遇到的ClickOutSide导入报错需要优先核对文件名拼写和大小写。
• @别名导入能正常运行的核心原因是，别名路径直接映射到src目录的绝对路径，完全跳过了相对路径层级计算、相对位置拼接的步骤，绕开了相对路径解析的出错点，但没有解决相对路径本身的配置问题。

标准解决方案 #

• 快速临时修复：导入目录入口文件时直接写全文件名，比如把import store from "./store"改成import store from "./store/index.ts"，跳过Vite的目录入口自动查找逻辑，从根源避免解析偏差。
• 修正Vite解析配置：打开项目根目录的vite.config.ts，补全resolve配置，确保Vite能正确识别后缀和目录入口，配置参考：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    // 配置导入时可自动补全的后缀，按项目使用的语言补全即可
    extensions: ['.ts', '.js', '.vue', '.json'],
    // 指定目录导入时默认查找的入口文件名
    mainFiles: ['index'],
    // 保留@别名配置，路径映射到src目录
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

配置修改后重启Vite开发服务即可生效。

• 统一路径书写规范：所有代码中的导入路径统一使用正斜杠/作为分隔符，禁止使用Windows系统的反斜杠\；导入时严格核对文件名大小写，和磁盘实际文件保持完全一致，避免跨系统运行报错。
• 高频复用模块统一用别名导入：对于src目录下的store、router、utils这类跨组件频繁引用的模块，统一使用@/xxx的别名路径导入，避免组件移动位置后相对路径层级失效。

内容的提问来源于stack exchange，提问作者Bah S