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即可