關於在 vite 中無法使用絕對地址動態導入的問題

碰到一個賊無語的問題，有一個項目，需要使用虛擬鍵盤，找到了一個自稱能在 vue 3 使用的，還能導入詞庫，看起來挺好，裝完一用。好家伙，報錯一環接一環，給我整無語了。但是市面上已經沒有另外一款帶中文的虛擬鍵盤了，只能捏鼻子下載下來自己改了。

整了半天，終於讓組件能在 vue 3 + TS 下跑了，一看，我的中文呢？看了看文檔，只需要引用詞庫就行了，我便將地址丟入組件中，然後，程式就報錯了：TypeError: Failed to resolve module specifier '@/dict/baseDict.json'。

我直接一臉問號，明明這路徑存在資源啊。然後我就開始搜索，一開始我直接搜了報錯，發現和我的問題差之千里，就換成 TypeScript dynamic import 當關鍵詞，搜出來一些似是而非的答案，不過也給了我啟發。接下來我就使用 Vue 3 template string TypeScript dynamic import 當關鍵詞，還是找不到答案。

但是在找的過程中，我發現使用一些規律，下麵是代碼：

import('@/dict.json') // 正常
import('../../dict.json') // 正常
var url = '../dict.json'
import(url) // 正常

import(`${'@/dict.json'}`) // 報錯
var url = '@/dict.json' 
import(url) // 報錯
var url = 'dict.json'
import(`@/${url}`) // 報錯
import('@/' + url) // 報錯
var url = 'dict.json'
import('../../' + url) // 報錯，但不是無法引用，而是 MIME 不正確

// 該案例使用了 js 而不是 json
var url = 'dict.js'
import('../../' + url) // 正常
// dict.js
import baseDict from "./baseDict.json";
export default baseDict

不過這已經不重要了，因為我在這問題上花了很多時間，已經和這問題犟上了。雖然我可以直接寫死路徑，但是廢了大半天也找不到答案，我這不得給這問題解決咯再寫篇博客記錄一下？

接下來我轉換了思路，這個報錯不止最開始的 TypeError，後面還接了錯誤來源：runtime-core.esm-bundler.js。我去搜了搜，發現這是 vue 的 運行相關的東西，於是便搜索 runtime-core template string dynamic import。終於在第一個鏈接中找到了答案。

簡單點說就是 vite 不支持動態導入 '@/' + 變數 這種模式，只支持相對路徑。然後我去改了這個項目和另外一個 element plus 生成的路由引用組件的代碼，看看能否支持這個結論，結果是支持的，只要改成 import(`${'@/dict.json'}`) 就會報錯，這下思路就清晰了，只要改成相對地址就完事了。順手給項目對應的 github 提了個 issus，希望可以給 vue 3 的中文開源環境提供一點點貢獻吧（不過不知道變成包引用後，這個相對路徑該寫成什麼樣）。

之後又在 vue 2 的項目中試了試，發現在路由組件中使用 import(`${'@/view/home.vue'}`) 是可以正常運行的，和之前找到的答案有點出入，不過，以後再說8~