vite 路徑別名 @ 配置

官網配置教程：https://cn.vitejs.dev/config

路徑別名 @ 有什麼用就不說了網上很多文章，本文重點演示vite + vue3項目配置過程

 

改造 vite.config.ts 文件

原本樣子：

 改造後；可以發現TS在警告

 繼續改造 tsconfig.json 文件：

添加字段 "allowSyntheticDefaultImports": true 還是報錯。

 留意發現多了個 references，references(項目引用) 是 TypeScript 3.0 中的一項新功能；

具體作用看官網描述：https://www.typescriptlang.org/docs/handbook/project-references.html

另一個寫的挺好的解釋：https://www.gowhich.com/blog/932

 演示項目就不整那麼多東西了，直接刪 tsconfig.node.json 文件並移除 tsconfig.json 內的 references

 問題都解決了然後修改頁面引入。

 組件加載成功，頁面運行正常。

本來本文重點是 vite 路徑別名 @ 配置，結果嘛中間解決TS警告就花費大半篇幅