typescript+vite項目配置別名的方法實現
我們為瞭省略冗長的路徑,經常喜歡配置路徑別名。但是在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!
推薦閱讀:
- typescript在node.js下使用別名(paths)無效的問題詳解
- 使用vite創建vue3項目的詳細圖文教程
- vue項目中 jsconfig.json概念及使用步驟
- vue配置根目錄詳細步驟(用@代表src目錄)
- Typescript中使用引用路徑別名報錯的解決方法