前言

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

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

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

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

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

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

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

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

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

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

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

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

2、在 base.js 文件中讀取【主要是放在 axios 請求處，因?yàn)槭前押蠖私涌谟蛎崛〕鰜砹耍援?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 => {  // 請求上面描述的本地配置文件
    // 當(dāng) 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ù)自己的實(shí)際情況而定

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

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

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

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

總結(jié)

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

最新評論