vue实现热加载-根据访问域名动态修改接口地址

2021-02-19

前言

项目需求：根据访问域名动态修改访问接口。定义一个config.js文件，在这个文件中通过window.location.host来获取访问域名，然后定义一个值，改值根据不同的域名来赋值相应的访问接口，最后在axios配置文件中获取这个值赋值给axios。

以下例子是基于vue-element-admin进行配置的，所以需要在public文件夹下新建config.js文件，然后在public文件夹下的index.html文件中引入config.js。具体代码如下：

config.js

var PLATFROM_CONFIG = {};
var $host = window.location.host
switch($host) {
  case 'a.baidu.com':
    $site = 'a.test.com';
    break;
  case 'b.baidu.com':
    $site = 'b.test.com';
    break;
  default:
    $site = 'c.test.com';
}
PLATFROM_CONFIG.baseUrl = "https://" + $site

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= webpackConfig.name %></title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2264920_uhexsfuh69d.css">
    <script src="lib/js/es6-promise.min.js"></script>
    <script src="lib/js/aliyun-oss-sdk-5.3.1.min.js"></script>
    <script src="lib/js/aliyun-upload-sdk-1.5.0.min.js"></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!--在这里引入config.js-->
    <script src="./config.js"></script>
    <!-- built files will be auto injected -->
  </body>
</html>

这个项目封装好的axios文件位于utils文件夹下的request.js文件。

request.js

let baseURL = window.PLATFROM_CONFIG.baseUrl  //获取baseurl
const service = axios.create({
  baseURL: baseURL, 
  timeout: 5000 // request timeout
})

不同项目创建config.js文件的目录不一样，需根据情况而定。