在Vite+TypeScript的项目中使用~和@代替src根路径的方法

Terwer 前端开发评论33字数 542阅读1分48秒阅读模式

原由

当前端项目组件比较多的时候,引用组件会面临路径特别长的情况,不易维护且容易出错。定义绝对路径映射是个好办法,下面就介绍 Vite+TypeScript 的项目中中的具体实现。文章源自浅海拾贝-https://blog.terwergreen.com/in-the-project-of-vite-typescript-replace-src-root-path-5ox0i.html

方案

  • vite.config.ts
    resolve: {
      alias: {
          "~": path.resolve(path.dirname(fileURLToPath(import.meta.url)), "src"),
    }
    }
    
  • tsconfig.json
    {
    "compilerOptions": {
      "paths": {
        "~/*": ["./src/*"]
      }
    }
    

使用文章源自浅海拾贝-https://blog.terwergreen.com/in-the-project-of-vite-typescript-replace-src-root-path-5ox0i.html

import {API_TYPE_CONSTANTS} from "~/utils/constants/apiTypeConstants";
import MetaweblogMain from "~/components/publish/tab/main/MetaweblogMain.vue";

// 原来的
// import {API_TYPE_CONSTANTS} from "../../../../../../utils/constants/apiTypeConstants";
// import MetaweblogMain from "../../MetaweblogMain.vue";
文章源自浅海拾贝-https://blog.terwergreen.com/in-the-project-of-vite-typescript-replace-src-root-path-5ox0i.html
相关文章
  • 扫码加我微信
  • 验证消息请输入:来自你的博客
  • weinxin
  • 我的微信公众号
  • 微信扫一扫与我交流吧
  • weinxin
Terwer
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: