vue打包后修改配置后端IP地址、端口等信息兩種方法

更新時間：2023年09月17日 09:26:17 作者：CSDN_33901573

這篇文章主要給大家介紹了關(guān)于vue打包后修改配置后端IP地址、端口等信息的兩種方法,文中通過代碼示例以及圖文介紹的非常詳細,對大家學習或者使用vue打包具有一定的參考借鑒價值,需要的朋友可以參考下

前言

用 vue-cli 構(gòu)建的項目通常是采用前后端分離的開發(fā)模式，也就是前端與后臺完全分離，此時就需要將后臺接口地址打包進項目中，但是，我們只是改個接口地址也要重新打包那就太麻煩了。怎么解決呢？方法如下，本文推薦倆種方式。

方式1：通過創(chuàng)建 js 文件進行實現(xiàn)

優(yōu)點: 簡單易懂, 方便上手

缺點: 配置文件容易被抓取【其實也不必太過于擔心】

1、在 public 文件夾下創(chuàng)建 webconfig.js 文件

window.webConfig = {
  "webApiBaseUrl": "http://127.0.0.1:8001",
  "webSystemTitle":"標題"
}

2、在 index.html 頁面應(yīng)用 js 文件

3、應(yīng)用完成之后，就可以在任何地方使用 window.webConfig

4、接口地址變化后直接修改 dist 下對應(yīng)的 webconfig.js 文件即可，修改完成重新打開項目查看 ip 端口已經(jīng)改變, 無需重新打包 vue 工程

方式二：通過創(chuàng)建 json 文件，配合使用 axios 來實現(xiàn)

1、同樣在 public 文件夾下創(chuàng)建 webconfig.json 文件

{
    "webApiBaseUrl": "http://api.xxxx.com/api",
    "webSystemTitle":"后臺管理系統(tǒng)"
}

2、在 base.js 文件中讀取【主要是放在 axios 請求處，因為是把后端接口域名提取出來了，所以當?shù)懒?base.js 文件】

 
/**
 * 接口域名的管理
 */
import axios from 'axios'
const base = {
  web: getWebApiBaseUrl(),
  signalRApiHost: process.env.VUE_APP_SignalR_APIHOST,
}
function  getWebApiBaseUrl(){
  let WebApiBaseUrl = process.env.VUE_APP_BASE_APIHOST
  axios.get('../webconfig.json').then(res => {  // 請求上面描述的本地配置文件
    // 當 env=prod 時請求地址為生產(chǎn)環(huán)境
    const node_env = process.env.NODE_ENV 
    if(node_env == 'production'){
      WebApiBaseUrl = res.data.webApiBaseUrl
    } else {
      WebApiBaseUrl = process.env.VUE_APP_BASE_APIHOST
    }
  })
  return WebApiBaseUrl // Vue.prototype.WebApiBaseUrl;
}
export default base

3、步驟2主要是解釋如何通過 axios 發(fā)起 get 請求，讀取 json 配置文件，具體寫在哪個地方，要根據(jù)自己的實際情況而定

注意：config.json 的路徑，路徑中沒有 public!

開發(fā)的過程中其實不太理解這是為什么，但從 npm run build 編譯后生成的 dist/ 才能更好的理解為什么會這樣。如下圖，打包后的 vue 工程，config.json 是在根目錄下的，沒有 public 目錄。