Vue全局配置文件

一、更改之前
提取項目的服務器配置信息，放到一個配置文件中（方便更改與查看，有時候切換服務的時候老是漏掉幾個）
項目中有四處需要更改的地方
1./src/main.js

import axios from 'axios';
let base = process.env.NODE_ENV === 'production' ? 'http://a.ik.cn/api' : '/api';//生產環境使用前面的請求地址，開發環境使用后面的代理請求地址地址
axios.defaults.baseURL = base;

2./config/index.js

proxyTable: {
    '/api': {
    target: 'http://a.ik.cn/api',//請求服務器的地址
    changeOrigin: true,
    pathRewrite: {
        '^/api' : ''
    }
  }
},

3.src/components/audio.vue

export default {
      data() {
            return {
                  baseVideoUrl: 'http://a.ik.cn/audio/'
            }
      }
}

4.src/components/image.vue

export default {
      data() {
            return {
                  baseImageUrl: 'http://a.ik.cn/images/'
            }
      }
}

二、開始改造
1.首先創建存放變量的配置文件
/src/assets/js/config.js

//生產環境環境變量配置
const ServerName = `a`;//服務器a名稱
// const ServerName = `b`;//服務器b名稱

//切換服務器地址與本地地址
const dataServer = `http://${ServerName}.ik.cn/api`;//服務器端服務地址
// const dataServer = `http://localhost:8080/railway`;//本地服務地址

//變量導出
module.exports = {
  DataServer : dataServer,//服務器地址
  ImgServer : `http://${ServerName}.ik.cn/images/`,//圖片服務地址
  AudioServer : `http://${ServerName}.ik.cn/audio/`,//音頻服務地址
}

2.在/src/main.js中使用

import axios from 'axios';
//服務配置
import config from '@/assets/js/config.js'
let base = process.env.NODE_ENV === 'production' ? config.DataServer : '/api';//生產環境使用前面的請求地址，開發環境使用后面的代理請求地址地址
axios.defaults.baseURL = base;

3.在/config/index.js中使用

const config = require('../src/assets/js/config');

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: config.DataServer,
        changeOrigin: true,
        pathRewrite: {
            '^/api' : ''
        }
      }
    },

  ......
  }
}

4.在src/components/audio.vue中使用

<template>
      <div>
            <audio controls :src="baseVideoUrl+'1.wav'"></audio>
      </div>
</template>
<script>
import config from "../../assets/js/config";
export default {
    data() {
      return {
        baseVideoUrl: config.AudioServer 
      }
    },
    ......
}
</script>

5.在src/components/image.vue中使用

<template>
      <div>
            <img :src="baseImageUrl+'1.jpg'" />
      </div>
</template>
<script>
import config from "../../assets/js/config";
export default {
    data() {
      return {
        baseImageUrl: config.ImgServer 
      }
    },
    ......
}
</script>

三、大功告成
每次更換地址的時候只需要把/src/assets/js/config.js文件中的ServerName 替換掉就可以了。
*替換地址之后需要重新運行項目配置才會生效