vite配置绝对路径-引入资源的绝对路径

在vite.config.ts中配置

import { defineConfig} from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path"; // 引入path
import { resolve } from "path"; // 引入path

export default defineConfig(({ mode }) => {
  return {
    plugins: [vue()],
    resolve: {
      // 配置别名
      alias: {
        "@": resolve(__dirname, "./src") // src资源绝对路径
      }
    },
  };
});

在tsconfig.json中配置：baseUrl、paths避免ts报错以及获得更好的提示

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "baseUrl": "./",  // 配置根路径
    "paths": {
      "@/*": ["src/*"] // 配置绝对路径校验
    }
  },
  "include": [
    "src/**/*",
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "vite.config.ts",
    "src/auto-import.d.ts" // 与vite.config.ts中的dts路径一致
  ], // 指定被编译文件所在的目录
  "exclude": ["node_modules", "dist", "**/*.js"], // 指定不需要被编译的目录
  "references": [{ "path": "./tsconfig.node.json" }]
}

页面使用：直接import "@/xxxxxx"引入即可

import "@/style.css";
import App from "@/App.vue";
import router from "@/router/index";

---

如果你使用的是js版本可以直接跳过tsconfig.json的配置