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請求不到資料的操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。