Vite 构建前端项目，路径别名 resolve.alias 配置遇到的问题

设置路径别名

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'),
    }
  }
})

这样就可以在.vue组件中使用 @ 代替 ./scr 以及更深的 ../../../ 嵌套路径了

<script setup>
  - import HelloWorld from './components/HelloWorld.vue';
  + import HelloWorld from '@/components/HelloWorld.vue';
</script>

!!! 但是这样就失去了IDE的智能路径提示了，这样虽然能够正常运行，但是每次都有输入@/之后的完整路径，这是不能忍受的！

哪有没有优雅的解决方式的，答案是：必须有 只需要在项目根目录下添加一个 jsconfig.json 文件内容如下

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

保存文件后，我们属性的智能提示就出来了，nice。

在 TS 项目中 添加以上配置，也能实现路径别名设置

只不过需要额外做一些调整

1. vite 项目配置 是 vite.config.ts 文件

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

配置完上述文件时你会发现，IDE提示 找不到模块“path”或其相应的类型声明。ts(2307)，这是因为 TS 不能解析 CommonJS 模式下的 nodejs 模块。

为了让TypeScript能够理解Node.js的path模块，你需要安装Node.js的类型定义文件。运行：

npm install @types/node --save-dev

2. 同时智能路径提示也要在 tsconfig.json 中配置 新增 "baseUrl": ".", "paths": { "@/*": ["src/*"] } 项

{
  "compilerOptions": {
  
  // ...其他配置项
    
  + /* path alias */ 
  + "baseUrl": ".",
  + "paths": {
  + "@/*": ["src/*"]
  + }
  },
}

3. 至此，我们就可以愉快的在组件中使用@代替亢长的 ../../ 嵌套路径了