碰到一個賊無語的問題，有一個專案，需要使用虛擬鍵盤，找到了一個自稱能在 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~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/550159.html
標籤：其他
上一篇：WebAssembly初嘗試