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

最新推荐文章于 2024-12-23 14:29:52 发布

广东彭于晏-

最新推荐文章于 2024-12-23 14:29:52 发布

阅读量3k

点赞数 8

CC 4.0 BY-SA版权

文章标签： vue.js 前端 typescript

本文链接：https://blog.csdn.net/qq_43059459/article/details/140363067

先看一下报错情况

实际上是可以访问的，但是就是爆红，但是这里就从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)