我有一個nuxt-app，里面有很多帖子。我最近重構了這個專案，我不會再發布generate所有帖子了，因為這樣做太費時間了。
相反，我有一個頁面，我將通過 url 查詢獲取匹配的帖子內容：
www.mypage.com/posts/?post=my-post-slug
因為內容位于靜態 json 檔案中，例如：
/static/data/posts/my-post-slug.json
/static/data/posts/my-post-slug_2.json
/static/data/posts/my-post-slug_3.json
/static/data/posts/my-post-slug_n.json
我閱讀了
關于如何以最佳方式加載 json的帖子
uj5u.com熱心網友回復：
這些檔案不包括“兩次”。您需要它們，因此您的static檔案夾中確實有它們。
同時，src如果您不想/不需要將它們公開并從代碼拆分中受益，那么您可能應該將它們放在您的目錄中，這要歸功于您鏈接的帖子中所解釋的（即使它仍然有效） 2017 年的！）。
在這里，由于您正在進行 axios 呼叫并使用target: 'static'，即使沒有 JS，它也會將您的整個作業捆綁在一起，并且它會提前完成。所以，為了擁有所有的可能性，我認為它包含在最終的捆綁包中。
如果您只想加載需要的內容而不傳送大static目錄，您應該動態匯入它們。您可以使用動態匯入：通過傳遞實際的postSlug.
PS：風格方面，更喜歡使用async/await(.then已棄用) ，也許還有$axios.$get.
uj5u.com熱心網友回復：
雖然我認為@kissu 的回答是在回答標題中的問題，但這并不是我的問題的解決方案。為了完整起見，我將發布經過長時間除錯后發現的內容。我仍然不太明白為什么會發生這種情況，但也許有人也可以對此發表評論：
在我的 nuxt 專案中，我使用了一個實用程式檔案getData.js，我將其中的一個函式getDataServer匯入到我的 vuex 存盤模塊之一中。
// vuex store module: store/data.js
import { getPreviewData } from '~/api/getData'
代碼如下所示：
// getData.js
// Get static JSON file (e.g. basic.de.json or posts.de.1.json)
export function getDataServer(fileProps) {
return require(`~/${fileProps.path}${fileProps.name}.${fileProps.lang}${
fileProps.page ? `.${fileProps.page}` : ''
}.json`)
}
只有通過匯入而不是執行該函式，webpack 才會將.json它在我的根檔案夾中找到的每個檔案捆綁到我的 app.js 中。
這就是為什么我的包中出現了一個 dist 檔案夾，如果沒有洗掉的話。（我在最初的問題中談到了這一點，其中包含了兩次內容）。
我什至創建了額外的檔案夾和 .json 檔案來查看，無論如何它們都被捆綁在一起。
只有getData.js從我的專案中洗掉后，我的包才變得干凈。
我知道使用該require命令，webpack 無法對事物進行 tree-shake 操作，所以我原以為某些代碼拆分功能不起作用，但我沒想到的是，這段代碼會自動獲取.json我檔案夾中的所有內容.. .
有誰知道為什么匯入該函式會以作為所有 .jsons 的通配符的方式執行它？對我來說，它仍然沒有任何意義。
謝謝和歡呼。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/392981.html