今天在做項目的時候遇到了一個問題， 就是把項目部署到不同的伺服器上， 但不能每次修改IP的時候就打包一次， 這就增加了前端的工作量，經過百度， 發現有一些方法是可以的，親測可用。 具體操作是， 1，在static文件夾下麵建立一個config.js文件， (function () { window. ...
今天在做項目的時候遇到了一個問題， 就是把項目部署到不同的伺服器上， 但不能每次修改IP的時候就打包一次， 這就增加了前端的工作量，經過百度， 發現有一些方法是可以的，親測可用。
具體操作是，
1，在static文件夾下麵建立一個config.js文件，
(function () {
window.SITE_CONFIG = {}
// api介面請求地址 這裡寫你後端要請求的介面地址，如果只是一個地址，可刪除下麵的那個
window.SITE_CONFIG['baseUrl'] = '請求的地址'
window.SITE_CONFIG['baseUrl_two'] = '請求的地址'
})()
2， 在vue項目中的index.html頁面引用這個config.js。利用window的屬性把地址在全局中暴露出來，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="./src/assets/style/index.css">
<title>修改IP</title>
<script src="./static/config.js"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
3， 在你封裝的請求頁面，把這個全局暴露出來的Window屬性介面IP寫到公共方法裡面。
import axios from './http' import axiosTwo from './axiosTwo' import store from '../store' let baseUrl=window.SITE_CONFIG.baseUrl //該方法為普通介面調用 請求頭不一樣 該請求頭為 application/json function requestPost([dataList, methodInfo] = [{}, {}]) { return axios.post(`${baseUrl}`, { dataList, methodInfo, }); }
這樣就完成了，重新打包之後，在static文件夾中會生成config.js的文件， 修改這個文件的地址，就可以更換IP地址了。
