vue3+vite配置路径别名@

原创已于 2023-07-01 22:43:07 修改 · 1.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

于 2023-06-28 11:31:58 首次发布

vue 同时被 2 个专栏收录

66 篇文章

订阅专栏

脚手架

9 篇文章

订阅专栏

文章介绍了如何在Vite项目中配置路径别名，包括安装@types/node，修改vite.config.ts文件以设置别名，如`@`代替`src`，`#`代替`types`，以及更新tsconfig.json文件来配置TypeScript的baseUrl。这样可以简化代码中的导入路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

配置路径别名

1. 安装

yarn add @types/node -D

2. 修改vite.config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path"; //这个path用到了上面安装的@types/node

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  //这里进行配置别名
  resolve: {
    alias: {
      "@": path.resolve("./src"), // @代替src
      "#": path.resolve("./types"), // #代替types
    },
  },
});

3. ts 路径映射

修改tsconfig.json 添加

 "baseUrl": ".", //查询的基础路径

4. 使用@

import '@/assets/index.less'