慕妹3146593
2023-04-27 17:11:59
我遇到了一個(gè)似乎不合邏輯的 ES6 導(dǎo)入情況,我想知道為什么以下導(dǎo)入在 Vue.js SFC 的方法中不起作用:const fullContentFile = '@/assets/rules/rules.json'import(fullContentFile).then(data => console.log('data 8: ', data))它在瀏覽器的控制臺(tái)上拋出以下錯(cuò)誤:Uncaught (in promise) Error: Cannot find module '@/assets/rules/rules.json' at eval (eval at ./src/components/staboqwi lazy recursive (app.js:2117), <anonymous>:5:11)我的項(xiàng)目設(shè)置重現(xiàn)該失敗:vue create import-issue(創(chuàng)建一個(gè) Vue.js 項(xiàng)目并接受默認(rèn)值)創(chuàng)建一個(gè)文件:src/assets/rules/rules.json具有以下內(nèi)容: [1,2,3,4,5]在 App.vue 中添加以下created()方法:created() { // The first three imports work always: import('@/assets/rules/rules.json').then(data => console.log('data 1: ', data) ) const file = 'rules' import('@/assets/rules/' + file + '.json').then(data => console.log('data 2: ', data) ) const fileName = 'rules.json' import('@/assets/rules/' + fileName).then(data => console.log('data 3: ', data) ) // The next two imports break compilation if used within htmlcars project const fileName2 = 'rules/rules.json' import('@/assets/' + fileName2).then(data => console.log('data 4: ', data) ) const fileName3 = 'assets/rules/rules.json' import('@/' + fileName3).then(data => console.log('data 5: ', data)) // Those imports don't work: const contentFile = '/assets/rules/' + file + '.json' import('@' + contentFile).then(data => console.log('data 6: ', data)) const atContentFile = '@/assets/rules/' + file + '.json' import(atContentFile).then(data => console.log('data 7: ', data)) const fullContentFile = '@/assets/rules/rules.json' import(fullContentFile).then(data => console.log('data 8: ', data))},從導(dǎo)入的變體中可以看出,唯一的區(qū)別是作為字符串提供給路徑參數(shù)的內(nèi)容以及存儲(chǔ)在常量/變量中的內(nèi)容。我確實(shí)花了 2 個(gè)晚上試圖在 Google 和 stackoverflow 上找到答案。也許比我有更多 javascript 背景的人可以解釋最后三個(gè)導(dǎo)入與之前的導(dǎo)入相比有什么問(wèn)題。一個(gè)有趣的副作用是,如果將該方法添加到它的文件中(不要忘記添加) ,那么第四次和第五次導(dǎo)入會(huì)破壞htmlcars項(xiàng)目的編譯。如果注釋掉項(xiàng)目將構(gòu)建。這是為什么?導(dǎo)入與編譯失敗的 scss 文件完全無(wú)關(guān)。create()App.vuesrc/assets/rules/rules.json
1 回答

慕神8447489
TA貢獻(xiàn)1780條經(jīng)驗(yàn) 獲得超1個(gè)贊
你需要知道,import()
今天常見(jiàn)的 JS 項(xiàng)目(包括 Vue)中的語(yǔ)句是在構(gòu)建時(shí)由 Webpack 處理的,而不僅僅是在運(yùn)行時(shí)
在構(gòu)建時(shí),Webpack 需要知道導(dǎo)入了哪個(gè)文件,以便它可以在運(yùn)行時(shí)使用它(transpile JS、預(yù)處理 SCSS 等)。但是因?yàn)檫@個(gè)導(dǎo)入是動(dòng)態(tài)的并且 Webpack 不能執(zhí)行你的代碼,所以它不可能知道傳入的參數(shù)的import()
?確切含義。它只能解析代碼并做出猜測(cè)——?“這里可以導(dǎo)入哪個(gè)文件?”?(基于你的文件系統(tǒng)的內(nèi)容)
因此,從“JavaScript 執(zhí)行”的角度來(lái)看示例并比較案例是沒(méi)有意義的,因?yàn)槭裁从行?,什么無(wú)效最終取決于 Webpack 解析內(nèi)部表達(dá)式并做出正確猜測(cè)的能力()
......
添加回答
舉報(bào)
0/150
提交
取消