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

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

使用相对路径试试

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

Answer 3

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

// App.vue

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

// vite.config.js

import { 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键，鼠标左键点击组件路径，也能正常跳转组件了。