碰到一个贼无语的问题，有一个项目，需要使用虚拟键盘，找到了一个自称能在 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~
评论(0)