前言

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

方式1：通過(guò)創(chuàng)建 js 文件進(jìn)行實(shí)現(xiàn)

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

缺點(diǎn): 配置文件容易被抓取【其實(shí)也不必太過(guò)于擔(dān)心】

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

window.webConfig = {
  "webApiBaseUrl": "http://127.0.0.1:8001",
  "webSystemTitle":"標(biāo)題"
}

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

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

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

方式二： 通過(guò)創(chuàng)建 json 文件，配合使用 axios 來(lái)實(shí)現(xiàn)

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

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

2、在 base.js 文件中讀取【主要是放在 axios 請(qǐng)求處，因?yàn)槭前押蠖私涌谟蛎崛〕鰜?lái)了，所以當(dāng)?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 => {  // 請(qǐng)求上面描述的本地配置文件
    // 當(dāng) env=prod 時(shí)請(qǐng)求地址為生產(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主要是解釋如何通過(guò) axios 發(fā)起 get 請(qǐng)求，讀取 json 配置文件，具體寫(xiě)在哪個(gè)地方，要根據(jù)自己的實(shí)際情況而定

注意：config.json 的路徑，路徑中沒(méi)有 public!

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

 接口地址變化后直接修改 dist/config.json 文件即可，無(wú)需重新打包 vue 工程

以上倆種方式，均可以實(shí)現(xiàn) vue 工程打包之后修改后端接口以及其他配置的訴求，結(jié)合實(shí)際情況運(yùn)用，個(gè)人推薦使用方式 1

總結(jié)

到此這篇關(guān)于vue打包后修改配置后端IP地址、端口等信息兩種方法的文章就介紹到這了,更多相關(guān)vue打包后修改配置信息內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論