前端学习笔记之import别名

问题一

现象

vite.config.ts中配置的别名在vscode中使用import useUserStore from “@store/modules/user.js”;时爆红

如果使用import useUserStore from "@/lib/store/modules/user.js"就不爆红

配置示例

vite.config.ts

import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@store': path.resolve(__dirname, 'src/lib/store'), // 确保路径正确
    },
  },
});

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@store/*": ["src/lib/store/*"] // 与 vite.config.ts 的别名保持一致
    }
  }
}

问题二

现象

如果按照现象一解决改了之后发现
import useUserStore from “@store/modules/user”;爆红
import useUserStore from “@store/modules/user.js”;不爆红
import useUserStore from “@store/modules/user.ts”; 爆红

解决方案

代码

{
  "compilerOptions": {
    "baseUrl": ".",
    "moduleResolution": "bundler", // 或 "node"（旧版 TS）
    "paths": {
      "@store/*": ["src/lib/store/*"],
      "@store/modules/user": ["src/lib/store/modules/user.js"] // 显式映射
    }
  }
}

解决之后

import useUserStore from “@store/modules/user”;在vscode中不爆红

vscode插件

Path Intellisense