(轉載)vue中axios設置公共請求地址

先描述一下場景:vue項目,後臺請求地址在配置文件中已經設置爲全局的,每次變動只需修改一次即可,然後要部署到三臺服務器。

然後:修改服務器地址,打包,部署 --> 修改服務器地址,打包,部署 --> 修改服務器地址,打包,部署 (3次 " for循環 ")

那麼當我們需要部署多臺服務器的時候,怎麼避免減少重複性的工作呢?

下面介紹一種方法來減少任務量:

1、新建配置文件(config.js)

如果是vue2.0的腳手架搭建的項目就在static新建一個配置文件,如果是vue3.0的腳手架搭建的項目,就在public下新建個配置文件,只要保證build後會被打包即可。

文件內容:服務器的ip地址、端口號地址、接口請求地址

window.dasConfig = {
  ip: '1.2.3.4',
  port: 9000,
  dbSourceApi: 'api/DbSourceManage',
  jobMetaApi: 'api/JobMetaManage'
};
2、index.html引用配置文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="Shortcut Icon" href="static/img/logo.ico" type="image/x-icon" />
    <script src="./static/dasConfig.js"></script>   <!-- 引用配置文件 -->
    <title>index</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章