新建项目 设置@路径别名导入

这里是 vue3+ts+vite 的一个项目所以生成的文件是 vite.config.ts 配置文件

1.首先需要安装npm i path --save

2.在vite.config.ts文件中使用它

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";
import path from "path";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],

//注意是这里的代码生效
  resolve: {
    alias: {
      "@": resolve(__dirname, "./src"),
      views: resolve(__dirname, "src/views"),
      utils: resolve(__dirname, "src/utils"),
    },
  },


  base: "./", // 打包路径

  server: {
    port: 3000, // 端口
    open: true, // 启动打开浏览器
    cors: true, // 跨域
    proxy: {
      "/api": {
        target: "http://localhost:8080/api/", // 目标地址
        changeOrigin: true, // 修改源
        secure: false, // ssl
        rewrite: (path) => path.replace("/api/", "/"),
      },
    },
  },
});

3.如果使用路径别名引入会报错，例如：

找不到模块“@/pages/404.vue”或其相应的类型声明。

那么你需要配置 gobal.d.ts全局文件，原因 是vite不会识别.vue结尾的文件，你需要进行配置来是vite来识别他从而使用路径别名引入

declare module '*.vue' {
  import { DefineComponent } from 'vue';  //这里是定义文件
  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

//defineComponent 是 Vue 3 中用于定义组件的函数，它提供了类型推断的功能，使得在使用组合式 API 时能够获得更好的类型支持。
//