vue项目接口域名动态获取操作

import axios from 'axios'

const config = {
 requestUrl: 'http://qiniu.eightyin.cn/path.json', //动态域名所在地址
 baseUrl: {
  dev: '/api/',
  pro: 'http://xxx.com/' // 接口域名，会被动态覆盖
 },

 requestRemoteIp: () => { // 动态获取
  return new Promise((resolve, reject) => {
   axios.get(config.requestUrl).then(response =>
   {
  
    config.baseUrl.pro = response.data.data.path;
    config.img.domain = config.baseUrl.pro;
    resolve()
   }, err => {
    reject()
   });
  });
 }
}

export default config

import config from '@/config/index.js'

// 读取接口域名
config.requestRemoteIp().finally(res => {
 /* eslint-disable no-new */
 new Vue({
  el: '#app',
 
  router,
  components: { App },
  template: '<App/>'
 })
});

const instance = axios.create({
   baseURL: process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
  })

const GenerateAssetPlugin = require('generate-asset-webpack-plugin');
const serverConfig = require('../serverConfig.json')；//引入根目录下的配置文件

const createJson = function() {
 return JSON.stringify(serverConfig);
};

//plugins 中使用
 plugins: [
  //打包时生成一个配置文件
  new GenerateAssetPlugin({
   filename: 'serverConfig.json',
   fn: (compilation, cb) => {
     cb(null, createJson());
   },
 }),
]

axios.get('serverConfig.json').then( e => {
 let baseURL = e.data.ProdUrl
 localStorage.setItem("baseURL", baseURL);
 new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
 })
})