问题描述
更改 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" }]
}

GitHub 加速计划 / vu / vue
85
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:5 个月前 )
9e887079 [skip ci] 3 个月前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐