vue項目打包為APP,靜態資源正常顯示,但API請求不到數據的操作
Vue項目通過Hbuild打包為APP后,靜態文件正常顯示,但并沒有像開發時那樣請求到數據。
這是為什么?因為APP并沒有跨域,不存在跨域一說。
我們在開發的時候,js在不同的域之間進行數據傳輸或通信,所以會給項目設置代理來跨域
config下的index.js
比如這個
proxyTable: { ’/api’:{ target: ’http://XXX/xxx/v3’, changeOrigin: true, pathRewrite: { ’^/api’: ’’ } }}
在開發時這樣做是沒錯的,但我們在打包時就不用設置這個跨域了,打包前直接將這個跨域注釋掉,然后將API請求地址改為絕對地址。例如這樣
let SwipeImg = () => axios({ // url: ’api/basic/advert/lists’, url: ’http://xxx.xxx.xx.xx/api/v3/basic/advert/lists’, params: { auth_key: key }})
改好之后在通過Hbuild打包后,APP數據就顯示正常了
這里要注意的是,我將打包后的APP放在夜神模擬器里,數據顯示還是不正常,但放在自己手機里就顯示正常,這點要注意
補充知識:vue 項目打包后看不到頁面內容
vue 項目打包命令是:
npm run build
如果打包后打開index.html頁面看不到內容,有可能就是路徑不對,需要修改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項目打包為APP,靜態資源正常顯示,但API請求不到數據的操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持好吧啦網。