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'
相关推荐
RoyLin1 小时前
TypeScript设计模式:复合模式
前端·后端·typescript
东坡白菜1 小时前
SSE 实现 AI 对话中的流式输出
javascript·vue.js
RoyLin1 小时前
TypeScript设计模式:策略模式
前端·后端·typescript
RoyLin3 小时前
TypeScript设计模式:桥接模式
前端·后端·typescript
猩兵哥哥5 小时前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js
RoyLin5 小时前
TypeScript设计模式:抽象工厂模式
前端·后端·typescript
EMT6 小时前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js
我是日安6 小时前
从零到一打造 Vue3 响应式系统 Day 9 - Effect:调度器实现与应用
前端·vue.js
鹏多多6 小时前
深入解析vue的keep-alive缓存机制
前端·javascript·vue.js
用户51681661458411 天前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router