typescript+vite項目配置別名的方法實現

Posted on by

我們為瞭省略冗長的路徑，經常喜歡配置路徑別名。但是在typescript下會遇到一些坑，比如導入路徑不能以“.ts”擴展名結束，路徑不識別等。下面我記錄瞭我的處理方法。

vite.config.js：

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src') // 配置別名
    }
  }
})

配置完之後，就可以在ide中使用別名瞭。但是這個時候我發現，路徑下面報錯瞭，hover上去後提示的錯誤是：導入路徑不能以“.ts”擴展名結束。

既然不允許用擴展名，那麼我省略擴展名好瞭。

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    },
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']
  }
})

這樣，擴展名就不需要寫瞭。

但是，項目無法運行瞭，報錯顯示：找不到這個文件。

那就是編譯出問題瞭，於是我調整瞭 tsconfig.json，添加如下配置：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"] // 相對位置需要配置baseUrl才能識別，否則會報錯
    }
  }
}

註: vite 和 vite2版本配置不一致

如果項目是vite版的 需要將最外層的resolve給取消掉 (重啟項目即可配置成功)

export default {
    alias: {
            '/@/': resolve(__dirname, 'src'),
    },
}

到此這篇關於typescript+vite項目配置別名的方法實現的文章就介紹到這瞭,更多相關typescript vite配置別名內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：