vue3+vite搭建后台项目-2项目 src 别名的配置

src 别名的配置

在开发项目的时候文件与文件关系可能很复杂,因此我们需要给src文件夹配置一个别名

  • 1.找到// vite.config.ts 文件
typescript 复制代码
mport {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
    plugins: [vue()],
    //添加以下代码
    resolve: {
        alias: {
            "@": path.resolve("./src") // 相对路径别名配置,使用 @ 代替 src
        }
    }
})
  • 2.// tsconfig.json中配置
typescript 复制代码
{
  "compilerOptions": {
    "baseUrl": "./", // 解析非相对模块的基地址,默认是当前目录
    "paths": { //路径映射,相对于baseUrl
      "@/*": ["src/*"] 
    }
  }
}

使用案例

typescript 复制代码
import App from '@/App.vue'
相关推荐
gongzemin34 分钟前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
麦麦大数据1 小时前
neo4j+django+deepseek知识图谱学习系统对接前后端分离前端vue
vue.js·django·知识图谱·neo4j·deepseek·在线学习系统
三翼鸟数字化技术团队3 小时前
Vue自定义指令最佳实践教程
前端·vue.js
Spark2383 小时前
关于vue3整合tiptap的slash菜单的ts支持
vue.js
随笔记3 小时前
Flex布局下,label标签设置宽度依旧对不齐,完美解决(flex-shrink属性)
javascript·css·vue.js
樊小肆3 小时前
实战!从 0 到 1 搭建 H5 AI 对话页面
前端·vue.js
JiangJiang3 小时前
揭秘Vue3源码之computed:懒计算与缓存机制全解析
前端·vue.js·面试
清灵xmf4 小时前
Vue 3 自定义权限指令 v-action
前端·javascript·vue.js·自定义指令
web_Hsir4 小时前
Uniapp 实现微信小程序滑动面板功能详解
vue.js·微信小程序·uni-app
爱摄影的程序猿6 小时前
如何基于 Django-Vue-Admin 快速二次开发?高效后台管理系统实战指南(附完整代码)
vue.js·python·django