Vue項目中的Dev/Prod環境管理

問題描述：

由于公司用于部署項目後端的伺服器IP常發生變化，相較于修改代碼中的位址後重新打包，使用讀取config檔案來更新IP位址的方法進行環境管理更為高效

方法：

1.建立配置檔案

用js充當配置檔案，這樣就可以直接擷取配置：

在pubulic 檔案夾建立 config.js:

 config檔案内容：

/**
 * vue 打包後保留配置檔案
 * 1.配置檔案放到public中可以避免打包
 */

// const config = {
//     docker_vue_address: 'http://172.28.53.100:5000',
// }

;(function(env) {
    // 開發環境接口伺服器位址
    const dev = {
        API_BASE_URL:"http://127.0.0.1:5000"
    }
    // 線上環境接口伺服器位址
    const prod = {
        API_BASE_URL:"http://172.28.xx.xxx:5000"
    }
    if (env == "dev") {
        return dev
    } else if (env == "prod") {
        return prod
    }
})("dev")
      

　　

2. 在入口檔案中讀取配置檔案，并聲明vue

import Vue from 'vue'
import './plugins/axios'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify'
import axios from "axios"
import api from './api/api'

Vue.config.productionTip = false
Vue.prototype.$api = api

# 配置不同環境下的config.js路徑
let myConfigPath = "/config.js"
if (process.env.NODE_ENV === "development") {

  myConfigPath = "../config.js"

}

# 讀取配置檔案，并挂載到vue的prototype
# 由于Axios的異步特性，需要在讀取config檔案後再進行vue的執行個體建立
axios.get(myConfigPath, { headers: { "Cache-Control": "no-cache" } }).then(response => {
  Vue.prototype.$apiBaseURL = eval(response.data).API_BASE_URL

    new Vue({/*  */
    router,
    store,
    vuetify,
    render: h => h(App)
  }).$mount('#app')

})      

打包後的dist，不存在public檔案夾，config.js就在項目的根目錄，是以生産環境下的路徑設定為"/config.js"

而在開發環境下，pubulic檔案夾在項目根目錄，但需注意，不能寫為"../public/config.js"， 而應寫為"../config.js"；否則找不到config.js

3. 在其他元件中引用該變量

例如