Solidjs项目VSCode自动导入缺失./导致Vite解析错误如何解决？

在Solidjs项目里用VSCode自动导入功能时，生成的路径会少./前缀，比如生成import Dashboard from "routes/Dashboard";，这会触发Vite报错：

Failed to resolve import "routes/Dashboard" from "src\App.jsx". Does the file exist?

手动改路径太麻烦，给你两种可行的解决办法：

方案一：让VSCode自动生成相对路径 #

你当前jsconfig.json里的baseUrl: "./src"是问题根源——VSCode会把src当成模块解析根目录，所以自动导入会省略相对路径前缀。如果不想用模块别名，直接调整配置让它生成相对路径：

1. 修改jsconfig.json，把baseUrl改成./或者直接删掉这一行：

{
  "compilerOptions": {
    "strict": true,
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "jsx": "preserve",
    "jsxImportSource": "solid-js",
    "types": ["vite/client"],
    "noEmit": true,
    "isolatedModules": true,
    "checkJs": true,
    "baseUrl": "./"
  }
}

2. 重启VSCode，之后自动导入就会生成带./的路径，比如import Dashboard from "./routes/Dashboard";，Vite就能正常解析了。

方案二：配置Vite支持路径别名（保留baseUrl便捷性） #

要是想保留baseUrl: "./src"带来的模块导入便利，就得给Vite配置对应的路径别名，让它能识别routes/xxx这种写法：

1. 先装@types/node（方便路径解析）：

npm install @types/node --save-dev

2. 在项目根目录创建或修改vite.config.js，添加别名配置：

import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';
import path from 'path';

export default defineConfig({
  plugins: [solidPlugin()],
  resolve: {
    alias: {
      '~': path.resolve(__dirname, 'src'),
      'routes': path.resolve(__dirname, 'src/routes')
    }
  }
});

3. 同步修改jsconfig.json，加paths配置让VSCode和Vite解析规则一致：

{
  "compilerOptions": {
    "strict": true,
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "jsx": "preserve",
    "jsxImportSource": "solid-js",
    "types": ["vite/client"],
    "noEmit": true,
    "isolatedModules": true,
    "checkJs": true,
    "baseUrl": "./src",
    "paths": {
      "~/*": ["*"],
      "routes/*": ["routes/*"]
    }
  }
}

4. 重启VSCode和Vite服务，之后自动导入的import Dashboard from "routes/Dashboard";就能被Vite正常识别了。

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