Vue全局配置文件

一、更改之前
提取项目的服务器配置信息，放到一个配置文件中（方便更改与查看，有时候切换服务的时候老是漏掉几个）
项目中有四处需要更改的地方
1./src/main.js

Copy
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

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

3.src/components/audio.vue

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

4.src/components/image.vue

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

二、开始改造
1.首先创建存放变量的配置文件
/src/assets/js/config.js

Copy

//生产环境环境变量配置
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中使用

Copy
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中使用

Copy
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中使用

Copy
<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中使用

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