【解决90%】vue3+vite3+ts使用@alias路径别名爆红解决办法

先看一下报错情况

实际上是可以访问的，但是就是爆红，但是这里就从0开始配置@路径别名

首先使用的是vite+v3+ts，

第一步

在根目录的vite.config.ts或者js下配置alias路径别名

resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },

全部代码：

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import Components from "unplugin-vue-components/vite";
import { AntDesignVueResolver } from "unplugin-vue-components/resolvers";
import svgLoader from "vite-svg-loader";
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
import path from "path";

const pathResolve = (pathStr: string) => {
  return path.resolve(__dirname, pathStr);
};
// https://vitejs.dev/config/
export default defineConfig({
  server: {
    cors: true,
    host: "0.0.0.0",
    hmr: true,
    proxy: {
      "/api": {
        target: "http://localhost:10000",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
  plugins: [
    vue(),
    svgLoader(),
    createSvgIconsPlugin({
      iconDirs: [pathResolve("./src/icons")],
      symbolId: "icon-[dir]-[name]",
    }),
    Components({
      resolvers: [
        AntDesignVueResolver({
          importStyle: false,
        }),
      ],
    }),
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`,
      },
    },
    modules: {
      localsConvention: "camelCase",
    },
  },
});

效果图片

第二步

在tsconfig.json的compilerOptions下配置paths，然后在根节点下配置include

compilerOptions配置：

"paths": {
	 "@": [
	     "src"
	   ],
	   "@/*": [
	     "src/*"
	   ],
	 }

include配置：

"include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ],

完整代码

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ],
  "compilerOptions": {
    "plugins": [
      {
        "name": "typescript-plugin-css-modules"
      }
    ],
    "baseUrl": ".",
    "paths": {
      "@": [
        "src"
      ],
      "@/*": [
        "src/*"
      ],
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ],
}

效果图片

第三步

到这里就可以了，网上搜的教程全都是不加include，不知道那些人是怎么整的，反正我的就得加，我也不知道是什么原理，因为我只是个写后端的