Vue3+TS更改文件系统路径别名报错：找不到模块“@/store”或其相应的类型声明。ts(2307)

问题描述

更改 vite.config.ts 文件，配置文件别名后，在页面中使用 @  爆红 ，但是页面不报错 

---

 问题原因

引入TS 文件报错找不到相应类型声明，因为在配置好 vite.config.ts 文件后

tsconfig.json 文件 或者 jsconfig.json 文件也要进行文件系统路径别名设置

解决办法

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { fileURLToPath, URL } from "url";

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
})

---

tsconfig.json或者 jsconfig.json 文件

添加如下配置

"baseUrl": ".",
 "paths": {
      "@/*": [ "src/*" ],
 }

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "noEmit": true,
    "types": ["element-plus/global"],
    "baseUrl": "./",  // 解析非相对模块的基础地址，默认是当前目录
    "paths": {
      "@/*": ["./src/*"]  // 路径映射，相对于baseUrl
    }
  },

  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

---

文章如有错误，恳请大家提出问题，本人不胜感激 。 不懂的地方可以评论，我都会 一 一 回复

文章对大家有帮助的话，希望大家能动手点赞鼓励，大家未来一起努力     长路漫漫，道阻且长