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

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

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

起因：

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

使用：

第一種方式：

1.我們在腳手架的public文件夾中新建一個js文件，用于存儲后臺地址配置：

示例 config.js 文件：

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

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

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

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

然后后臺代理地址

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

然后我們在打包的時候就可以看到dist里面有一個config.js 文件，就可以在這個文件中修改地址了；

第二種方式：

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

示例代碼如下：

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
     [process.env.VUE_APP_BASE_API]: {
        /* 服務器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è)置端口號
port = 8080 

# 前端請求路徑
VUE_APP_BASE_API = '/api'

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