Vue 设置别名联想路径

配置

设置联想提示

在根目录下添加配置文件jsconfig.json

json 复制代码
{
    // 联想提示
    "compilerOptions":{
        "baseUrl":"./",
        "paths":{
            "@/*":[
                "src/*"
            ]
        }
    }
}

设置路转换

将 @ 映射为 ./src

javascript 复制代码
import {fileURLToPath,URL} from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve:{
    // 路径转换
    alias:{
      '@':fileURLToPath(new URL('./src',import.meta.url))
    }
  }
})

使用

当使用 @ 时,自动提示并映射到 src 目录下

相关推荐
楚轩努力变强30 分钟前
前端工程化常见问题总结
开发语言·前端·javascript·vue.js·visual studio code
鱼樱前端32 分钟前
rust基础二(闭包)
前端·rust
菜鸟学Python40 分钟前
Python web框架王者 Django 5.0发布:20周年了!
前端·数据库·python·django·sqlite
前端开发爱好者1 小时前
只有 7 KB!前端圈疯传的 Vue3 转场动效神库!效果炸裂!
前端·javascript·vue.js
pe7er1 小时前
RESTful API 的规范性和接口安全性如何取舍
前端·后端
Fly-ping1 小时前
【前端】JavaScript文件压缩指南
开发语言·前端·javascript
未来之窗软件服务2 小时前
免费版酒店押金原路退回系统之【房费押金计算器】实践——仙盟创梦IDE
前端·javascript·css·仙盟创梦ide·东方仙盟·酒店押金系统
拾光拾趣录2 小时前
常见 HTTP 请求头:从“为什么接口返回乱码”说起
前端·http
阿华的代码王国2 小时前
【Android】卡片式布局 && 滚动容器ScrollView
android·xml·java·前端·后端·卡片布局·滚动容器
2025年一定要上岸2 小时前
【pytest高阶】源码的走读方法及插件hook
运维·前端·python·pytest