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. 在其他組件中引用該變量

例如

 

 

生產環境的部署服務器IP地址更新時，只需要進入到項目root路徑下，直接修改config.js即可