快捷導(dǎo)航

vue前端靈活改變后端地址兩種方式

更新時(shí)間：2024年03月14日 11:40:44 作者：aCknow

最近在學(xué)習(xí)或工作中遇到,把Vue前端項(xiàng)目打包后,要求可以再次修改請(qǐng)求后端接口的基礎(chǔ)地址,下面這篇文章主要給大家介紹了關(guān)于vue前端靈活改變后端地址的兩種方式,需要的朋友可以參考下

起因：

我們?cè)谧鲰?xiàng)目時(shí)；很多時(shí)候會(huì)遇到后臺(tái)地址變動(dòng)，不管是在打包或者是開發(fā)中；每一次后臺(tái)開機(jī)啟動(dòng)或者換電腦啟動(dòng)后臺(tái)，后臺(tái)地址都會(huì)隨之變動(dòng)；而這種情況；每次后臺(tái)改動(dòng)前端就要去找地址跟著改；開發(fā)還好，實(shí)際應(yīng)用時(shí)，每次都要改了之后再打包；頻繁打包就很麻煩。有沒有什么方式可以直接修改后臺(tái)地址呢？當(dāng)然有，該文就是提供一種方便的處理方式。

使用：

第一種方式：

1.我們?cè)谀_手架的public文件夾中新建一個(gè)js文件，用于存儲(chǔ)后臺(tái)地址配置：

示例 config.js 文件：

module.exports = {
    interfaceIP: "http://xxxxxx",
    // interfaceIP: "http://xxxxxxx",
};

2.在 vue.config.js 中引入 config.js：

這個(gè)地方要注意一下，因?yàn)関ue.config.js是在Node.js環(huán)境下執(zhí)行的，而不是在瀏覽器環(huán)境下執(zhí)行，所以要用Node.js中的require語法。

const interfaceIP = require("./public/config");

然后后臺(tái)代理地址

devServer: {
    //本機(jī)地址
    host: 'localhost',
    //獲取port端口
    port: port,
    // 端口配置
    // port: 1888,
    // 反向代理配置
    proxy: {
      //process.env.VUE_APP_BASE_API的參數(shù)會(huì)讀取對(duì)應(yīng)環(huán)境變量數(shù)據(jù)，
      //如讀取的數(shù)據(jù)是'/api',那么意思就是前端請(qǐng)求的/api路徑都會(huì)被帶來到，參數(shù)target的地址
      [process.env.VUE_APP_BASE_API]: {
        /* 服務(wù)器5866 本地電腦5566 */
        target: interfaceIP.interfaceIP,
        //代理的路徑
        // target: process.env.VUE_APP_BACKEND_URL,
        changOrigin: true, // 允許跨域
        ws: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: '/'
        }
      }
    }
  }

然后我們?cè)诖虬臅r(shí)候就可以看到dist里面有一個(gè)config.js 文件，就可以在這個(gè)文件中修改地址了；

第二種方式：

第二種就不是直接修改地址了，而是配置環(huán)境地址；使用環(huán)境變量來設(shè)置后臺(tái)代理地址。在src的同一級(jí)新建.env.development文件；在里面配置好需要的多個(gè)后臺(tái)地址。

示例代碼如下：

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
     [process.env.VUE_APP_BASE_API]: {
        /* 服務(wù)器5866 本地電腦5566 */
        //代理的路徑
       	target: process.env.VUE_APP_BACKEND_URL,
        changOrigin: true, // 允許跨域
        ws: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: '/'
        }
      }
    }
  }
};

// .env.development
# 開發(fā)環(huán)境配置
ENV = 'development'

#設(shè)置端口號(hào)
port = 8080 

# 前端請(qǐng)求路徑
VUE_APP_BASE_API = '/api'

#后端服務(wù)器地址不要忘記添加http或https
VUE_APP_BACKEND_URL = http://XXXXXXXXXXX