vite配置@别名,以及如何让IDE智能提示路经

1.配置路径(vite.config.js)

javascript 复制代码
// vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";

// https://vite.dev/config/
export default defineConfig({
  server: {
    port: 8080,
  },
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"), // 配置 @ 指向 src
    },
  },
});

2.IDE配置

(项目根路径下,新建jsconfig.json。和src同级)

javascript 复制代码
// jsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".", // 相对于项目根目录
    "paths": {
      "@/*": ["src/*"] // 告诉 IDE:@ 就是 src
    }
  },
  "include": ["src"]
}

3.测试

相关推荐
闲蛋小超人笑嘻嘻6 小时前
前端面试十四之webpack和vite有什么区别
前端·webpack·node.js
李宥小哥7 小时前
C#基础08-面向对象
开发语言·c#
nsjqj7 小时前
数据结构:Map 和 Set (二)
java·开发语言·数据结构
rggrgerj7 小时前
Vue3 组件完全指南代码
前端·javascript·vue.js
pixelpilot7 小时前
Nimble:让SwiftObjective-C测试变得更优雅的匹配库
开发语言·其他·objective-c·swift
froginwe118 小时前
C# 循环
开发语言
EnCi Zheng8 小时前
Java_钻石操作符详解
java·开发语言
拾忆,想起8 小时前
RabbitMQ事务机制深度剖析:消息零丢失的终极武器
java·开发语言·分布式·后端·rabbitmq·ruby
IvanCodes8 小时前
八、Scala 集合与函数式编程
大数据·开发语言·scala
golang学习记8 小时前
从0死磕全栈之Next.js App Router动态路由详解:从入门到实战
前端