【解决】Vue + Vite + TS 配置路径别名成功仍爆红

目录

前言

一.vite.config.ts

二.tsconfig.json

[三. 别名配置成功,但语法提示爆红问题](#三. 别名配置成功,但语法提示爆红问题)

四、可能遇到的问题


前言

‌在项目中设置路径别名后仍然出现爆红问题,通常是由于配置不完整或配置错误导致的。Vite 中配置 alias 总共需要配置两个地方:

  • vite.config.ts:让代码编译通过
  • tsconfig.json:让代码编辑器语法验证通过

一.vite.config.ts

TypeScript 复制代码
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      // 相对路径别名配置,使用 @ 代替 src
      "@": path.join(__dirname, "./src"),
    },
  },
});

如果你的项目引入path报错,则需要下载

bash 复制代码
npm i @types/node

二.tsconfig.json

bash 复制代码
{
   ...其他代码
	
  "compilerOptions": {
    // 路径
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
}

三. 别名配置成功,但语法提示爆红问题

你可能会发现,明明使用别名后,模块能够正常引入运行,但是语法提示就是爆红。

如果出现这种情况、那么大概率是 tsconfig.json 中的 compilerOptions 配置被覆盖了。

可以通过以下手段排查。

  1. 查看 vscode 对 ts 配置加载的文件

    可以明显的看到,加载完 tsconfig.json 文件后,还加载了 tsconfig.app.json 配置文件

  2. 查看 vscode 默认加载的 tsconfig.json 文件可以发现,它引入了tsconfig.app.json 文件

    bash 复制代码
    {
      "files": [],
      "references": [
        { "path": "./tsconfig.app.json" },
        { "path": "./tsconfig.node.json" }
      ],
      "compilerOptions": {
        "baseUrl": ".", // 解析非相对模块的基地址,默认是当前目录
        "paths": {
          //路径映射,相对于baseUrl
          "@/*": ["src/*"]
        },
        "allowSyntheticDefaultImports": true
      },
    }
  3. 查看 tsconfig.app.json 文件我们可以发现,它也有一个 compolerOptions 配置,这样它就把 tsconfig.json 中的配置覆盖掉了

    bash 复制代码
     "compilerOptions": {
        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    
    	/* Linting */
        "strict": true,
    	"noUnusedLocals": true,
        "noUnusedParameters": true,
    	"noFallthroughCasesInSwitch": true,
        "noUncheckedSideEffectImports": true,
      },
  4. 找到问题,我们直接把对应的配置放到 tsconfig.app.json 中即可

    bash 复制代码
    "compilerOptions":{
    	... 其他配置
    	"baseUrl":".",
    	"paths":{
    		"@/*":["src/*"],
    		"@/*":["./src/*"],// 这样也可以,路径正确即可
    	}
    }
  5. 重启 vscode!!!

四、可能遇到的问题

  1. 配置后 vscode 仍然报语法提示错误,但是项目编译通过。

解决办法:重启vscode

  1. vscode 语法提示通过,项目不通过

解决办法:vite.config.ts 中 alias 配置指定的地址如"@": path.join(__dirname, "./src"),要使用 path.join 方法处理,用相对路径的话,在编译时可能文件处于的路径会改变。

相关推荐
小蜜蜂嗡嗡2 小时前
【flutter对屏幕底部有手势区域(如:一条横杠)导致出现重叠遮挡】
前端·javascript·flutter
伍哥的传说3 小时前
Vue 3 useModel vs defineModel:选择正确的双向绑定方案
前端·javascript·vue.js·definemodel对比·usemodel教程·vue3.4新特性·vue双向绑定
胡gh8 小时前
页面卡成PPT?重排重绘惹的祸!依旧性能优化
前端·javascript·面试
胡gh8 小时前
简单又复杂,难道只能说一个有箭头一个没箭头?这种问题该怎么回答?
javascript·后端·面试
言兴8 小时前
# 深度解析 ECharts:从零到一构建企业级数据可视化看板
前端·javascript·面试
山有木兮木有枝_8 小时前
TailWind CSS
前端·css·postcss
烛阴9 小时前
TypeScript 的“读心术”:让类型在代码中“流动”起来
前端·javascript·typescript
杨荧9 小时前
基于Python的农作物病虫害防治网站 Python+Django+Vue.js
大数据·前端·vue.js·爬虫·python
Moment10 小时前
毕业一年了,分享一下我的四个开源项目!😊😊😊
前端·后端·开源
程序视点11 小时前
Escrcpy 3.0投屏控制软件使用教程:无线/有线连接+虚拟显示功能详解
前端·后端