- 需要注意的是改成axios請(qǐng)求后,打包app有獲取不到j(luò)son文件
- 要把json文件放入public跪削,但光放在public谴仙,打包編輯后會(huì)直接在dist根目錄了,和assets默認(rèn)的靜態(tài)文件路徑不一致碾盐,所以在public目錄下新加一個(gè)assets晃跺,這樣打包后就會(huì)和src下的assets合并
image.png
- 然后又發(fā)現(xiàn)瀏覽器調(diào)試沒(méi)問(wèn)題,但打包后依舊找不到路徑毫玖,這里一定一定一定注意掀虎,apk里要使用相對(duì)路徑凌盯,讓它自己關(guān)聯(lián)上下文
以下是項(xiàng)目上的相關(guān)代碼
//注意因?yàn)橹苯右雑son會(huì)打字打包的文件過(guò)大,所以這里要使用請(qǐng)求的方式
const getMapJson = (key: string) => {
let mode = import.meta.env.MODE
const base = `dataMap/${key}.json`
//根據(jù)環(huán)境變量涩盾,判斷是開發(fā)環(huán)境還是生產(chǎn)環(huán)境十气,生成的路徑不一樣,app中不需要完整路徑春霍,是上下文
let jsonPath = mode === 'development' ? '/assets/' + base : base
axios
.get(new URL(jsonPath, import.meta.url).href)
.then((res: any) => {
mapJson[key] = res.data
})
.catch(err => {
console.log(err)
})
}
//需要加載的json文件
const files = ['aaa','bbb']//json文件名集合砸西,遍歷請(qǐng)求
const mapJson = {}
for (const i in files) {
getMapJson(files[i])
}
這樣處理后,體積小一半址儒,且apk也沒(méi)問(wèn)題