前端 - 别名提示不显示，这是为什么？

Question

import { defineConfig } from "vite";import vue from "@vitejs/plugin-vue";import path from "path";export default defineConfig({  plugins: [vue()],  // 配置别名  resolve: {    alias: {      "@": path.resolve(__dirname, "src"),    },  },});

上面是vite.config.ts的别名配置

1.测试过别名注释在运行项目会报路径找不到，加上注释页面正常渲染（@符号）

import App from "@/App.vue";

Answer 1

如果是ts还需要在tsconfigjson加上这个路径

Answer 2

你的配置没问题，我用你的配置在本地跑了一个干净的模版，证明可行。

// App.vue<script setup>// 使用@作为前缀，能正常读取到组件import HelloWorld from '@/components/HelloWorld.vue'</script>

// vite.config.jsimport { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import path from 'path'// https://vitejs.dev/config/export default defineConfig({  plugins: [vue()],  resolve: {    alias: {      "@": path.resolve(__dirname, "src"),    },  },})

所以你说的应该是vscode无法识别你的路径别名而不是vite不识别。
要让vscode识别你的路径别名，需要在项目根目录下新增jsconfig.json文件并做如下配置：

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

然后按住ctrl键，鼠标左键点击组件路径，也能正常跳转组件了。

Answer 3

使用相对路径试试

export default defineConfig({  plugins: [vue()],  // 配置别名  resolve: {    alias: {      "@": path.resolve(__dirname, "./src"),    },  },})

Answer 4

在 Vite 配置中，别名（alias）的配置是正确的。你定义的别名 "@" 指向了项目的 "src" 目录。但是，你在使用别名时遇到了问题，可能是因为别名没有正确地被 Vite 解析。

问题可能出现在以下几个地方：

1. 文件扩展名: 确保在使用别名导入文件时，包含了正确的文件扩展名。Vite 通常可以通过扩展名推断出文件类型，但如果你在别名路径后没有提供扩展名，它可能无法正确解析文件。例如，尝试将 import App from "@/App.vue"; 改为 import App from "@/App.vue";。
2. IDE/编辑器问题: 有时，IDE（如 Visual Studio Code）可能没有正确地解析别名。这通常不会影响代码的实际运行，但可能会影响你的开发体验（例如，无法正确跳转到定义或显示路径错误）。尝试重启 IDE 或安装/更新与 Vite 和 Vue 相关的插件。
3. 路径问题: 确保 __dirname 正确指向了你的项目根目录。__dirname 通常是 Node.js 中的全局变量，它指向当前执行脚本所在的目录。在 Vite 配置中，它应该指向包含 vite.config.ts 文件的目录。
4. Vite 版本: 确保你使用的 Vite 版本支持你的配置。有时，旧版本的 Vite 可能不支持某些特性或配置。尝试更新 Vite 到最新版本。

如果以上方法都无法解决问题，建议检查项目中的其他配置和代码，看是否有其他可能影响别名解析的因素。如果问题依然存在，请提供更多关于项目结构和配置的详细信息，以便进一步分析。