紀錄這個事情是因為當時我將Vue 2的專案轉到Vue3的時候, 我將所有的環境跟套件都轉到相容Vue3了, 但當我開啟畫面失敗了
雖然Vue 3 (目前我使用的版本version: 3.0.5)推薦大家使用composition API來管理JS端的邏輯, 避免像Vue2一樣分散, 但依然還是相容Vue 2 的Option API. 所以應該不是相容的問題才對
要Debug 的起手式就是先看Chrome 的Developer Tool console, 看到的畫面如下
Console裡面顯示, browser 找不到這些components, 導致載入失敗
Note: 在Vue2 並不會看到在network這種找不到components的問題, 因為Vue2通常在本地開發時, 依然會透過webpack bundle 之後, browser 會載入這些bundle後的檔案, 像是app.[random string].js. 但如果是用Vite 開發, 因為Vite並非事先打包後再給browser 讀取, 反而是利用browser 本身支援的Native ESM載入功能,直接載入需要的檔案在發現這個問題後, 嘗試著去思考這個問題著原因。
在一番反覆查看這些network 跟console狀態後發現, browser 看起來載入的路徑是
http://localhost:8080/src/components/Dialog/DialogContainer但我們事實上沒有一個檔案叫做DialogContainer, 而是DialogContainer.vue
也就是問題點, 我們在Vue 2 載入的Vue component因為透過webpack 處理, 我們省略了.vue副檔名
而在Vite我們並沒有加入這個設定
那我們在Vite的config加入extension設定就好了嗎?
找了一下Vite的官方文件
我們可以在vite.config.js 裡面加入extensions
但文件內有出現一段警告
Note it is NOT recommended to omit extensions for custom import types (e.g. .vue) since it can interfere with IDE and type support.那我們試著加看看, 結果…
結果console報錯, 跟你講說Vite沒有這種loader
到網路上找了一下發現Vite的GitHub有人討論這個問題
尤雨溪大大直接講了, 這是故意設計成這樣的, 讓那些沒有.vue附檔名的檔案會載入失敗, 也就強迫你必須在載入Vue component的時候一定要加.vue
在他的Twitter 也有講到以前在使用Vue CLI 的時代, 可以讓你不加.vue是個小失誤, 以後他會要求大家一定要加
那知道問題的r原因了, 解決的方式很簡單, 就是把每個一個import 的Vue 檔案加上.vue
但….
因為是升級舊專案, 所以應該有一大堆 import 需要改, 一個一個改就非常耗時間
還好有人有遇到這個問題, 並提供使用正規表示式的解法
依照專案的架構, 看自己的Vue 檔案都常放在哪裡, 以這個專案來說通常是放在”components” 跟 “views” 兩個資料夾下
而且我們也有設定”components” 跟 “views” 的alias 所以我們可以再縮短這個regex 規則
'components.*$
"components.*$ // 檢查單引號跟雙引號的import跟
'views.*$
"views.*$並透過regex 對應到的字串修改
$0.vue這樣還沒結束
因為通常我們的檔案是
"components/xxx.vue";所以我們的$0其實是對應到 "components/xxx.vue"; 整個字串.
那$0.vue 就代表
"components/xxx.vue";.vue所以再修改一下
將 “;.vue 取代成 .vue";
這樣就完成了
最後, 可能會有一些使用相對路徑的, 可能沒辦法用正規表示式對應的
再手動加上.vue
結語
雖然這只是個小問題, 不過我還是想紀錄一下自己升級Vue3的過程, 提供給有遇到相同問題的人
