基於Vue-cli搭建的項目怎樣和背景交互

2023年10月5日 205次阅读 来源: xieyanmei

這段時刻在折騰有vue做開闢，之前也用過，然則大部分都是用一些簡樸的數據綁定。踏了許多坑，總結了一下，願望對剛剛開始折騰的小夥伴有協助。

常見問題一：用vue-cli搭好環境今後，當地域名和測試環境的域名不一致，怎樣跨域接見背景接口？

在config目錄下找到index.js，在dev下增加以下:

proxyTable: {
      '/api':{//指定以/api開首的接口都走代辦
          target:'https://yhhdtest.moguyun.com',//須要銜接背景接口的域名
          changeOrigin:true,//支撐跨域
          pathRewrite:{
              '/api':''
          }
      }
    },

以上的設置現實上是dev-server 使用了異常壯大的 http-proxy-middleware 包。更多高等用法，請查閱其文檔。

要求/api/getGame現實發出去的要求是 https://yhhdtest.moguyun.com/…

設置一個適用於當地和臨盆環境的背景要求

根據上面的設置好今後，當地環境能夠勝利的跨域和背景交互了。然則每一個接口前面都要加一個底本不須要的/api前綴，這個實在和我們臨盆是不符合的。這個時刻須要我們做一些設置，經由過程編譯來辨別。

在index.js下離別找到dev和prod（有的項目能夠直接抽出來，零丁成文件了）

dev.env.js
module.exports = merge(prodEnv, {
    NODE_ENV: '"development"',
    API_HOST:'"/api/"'
})
prod.env.js
module.exports = {
    NODE_ENV: '"production"',
    API_HOST:'""'
}

癥結點在於API_HOST，這個時刻我們的要求能夠這麼寫

process.env.API_HOST+'/getGame'
    原文作者：xieyanmei
    原文地址: https://segmentfault.com/a/1190000015424771
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞