vue項(xiàng)目打包為APP,靜態(tài)資源正常顯示,但API請(qǐng)求不到數(shù)據(jù)的操作
Vue項(xiàng)目通過(guò)Hbuild打包為APP后，靜態(tài)文件正常顯示，但并沒(méi)有像開(kāi)發(fā)時(shí)那樣請(qǐng)求到數(shù)據(jù)。
這是為什么？因?yàn)锳PP并沒(méi)有跨域，不存在跨域一說(shuō)。
我們?cè)陂_(kāi)發(fā)的時(shí)候，js在不同的域之間進(jìn)行數(shù)據(jù)傳輸或通信,所以會(huì)給項(xiàng)目設(shè)置代理來(lái)跨域
config下的index.js
比如這個(gè)
proxyTable: {
'/api':{
target: 'http://XXX/xxx/v3',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
在開(kāi)發(fā)時(shí)這樣做是沒(méi)錯(cuò)的，但我們?cè)诖虬鼤r(shí)就不用設(shè)置這個(gè)跨域了，打包前直接將這個(gè)跨域注釋掉，然后將API請(qǐng)求地址改為絕對(duì)地址。例如這樣
let SwipeImg = () => axios({
// url: 'api/basic/advert/lists',
url: 'http://xxx.xxx.xx.xx/api/v3/basic/advert/lists',
params: {
auth_key: key
}
})
改好之后在通過(guò)Hbuild打包后，APP數(shù)據(jù)就顯示正常了
這里要注意的是，我將打包后的APP放在夜神模擬器里，數(shù)據(jù)顯示還是不正常，但放在自己手機(jī)里就顯示正常，這點(diǎn)要注意
補(bǔ)充知識(shí)：vue 項(xiàng)目打包后看不到頁(yè)面內(nèi)容
vue 項(xiàng)目打包命令是：
npm run build
如果打包后打開(kāi)index.html頁(yè)面看不到內(nèi)容，有可能就是路徑不對(duì)，需要修改config/index.js文件
如下：
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',//此處為修改的地方，這里加.
..........
}
以上這篇vue項(xiàng)目打包為APP,靜態(tài)資源正常顯示,但API請(qǐng)求不到數(shù)據(jù)的操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue樣式綁定的幾種實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
當(dāng)遍歷一個(gè)數(shù)組或枚舉一個(gè)對(duì)象進(jìn)行迭代循環(huán)展示時(shí)，就會(huì)用到列表渲染指令 v-for。這篇文章主要介紹了Vue.js 中的 v-for 列表渲染指令,需要的朋友可以參考下2018-11-11
vue2+element-ui+nodejs實(shí)現(xiàn)圖片上傳和修改圖片到數(shù)據(jù)庫(kù)的方法
在Web開(kāi)發(fā)中經(jīng)常需要使用圖片,有時(shí)候需要對(duì)圖片進(jìn)行上傳,這篇文章主要給大家介紹了關(guān)于vue2+element-ui+nodejs實(shí)現(xiàn)圖片上傳和修改圖片到數(shù)據(jù)庫(kù)的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
Vue.js獲取被選擇的option的value和text值方法
今天小編就為大家分享一篇Vue.js獲取被選擇的option的value和text值方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
這篇文章主要介紹了jenkins自動(dòng)化部署vue，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
bpmn.js是一個(gè)BPMN2.0渲染工具包和web建模器,使得畫(huà)流程圖的功能在前端來(lái)完成,這篇文章主要給大家介紹了關(guān)于vue3集成bpmn.js的相關(guān)資料,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
Vue+tsx使用slot沒(méi)有被替換的問(wèn)題
本文主要介紹了Vue+tsx使用slot沒(méi)有被替換的問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
vue3配置Element及element-plus/lib/theme-chalk/index.css報(bào)錯(cuò)的解決
這篇文章主要介紹了vue3配置Element及element-plus/lib/theme-chalk/index.css報(bào)錯(cuò)的解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue cli4中mockjs在dev環(huán)境和build環(huán)境的配置詳情
這篇文章主要介紹了vue cli4中mockjs在dev環(huán)境和build環(huán)境的配置詳情，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
手把手教你搭建一個(gè)vue項(xiàng)目的完整步驟
身為入行未深的小白前端,不斷的學(xué)習(xí)是我們不可丟失的習(xí)慣,前端流行的框架也是層出不窮,vue在眾多框架中脫穎而出,下面這篇文章主要給大家介紹了關(guān)于搭建一個(gè)vue項(xiàng)目的完整步驟,需要的朋友可以參考下2022-07-07