vue打包後的config配置文件

用vue-cli構建的項目一般是採用先後端分離的開發模式，也就是前端與後臺徹底分離，此時就須要將後臺接口地址打包進項目中，此時若是隻是改個接口地址也要從新打包那就太麻煩了，解決方法是直接加個config.js文件

1.首先咱們在static文件下創建一個js文件，就叫config.js吧，內容爲

window.g = {
  AXIOS_TIMEOUT: 10000,
  ApiUrl: 'http://localhost:21021/api/services/app', // 配置服務器地址,
  ParentPage: {
    CrossDomainProxyUrl: '/Home/CrossDomainProxy',
    BtnsApi: '/api/services/app/Authorization/GetBtns',
    OrgsApi: '/api/services/app/authorization/GetOrgsByUserId'
  },
}

 

2.接下來咱們只須要在index.html這個入口文件裏引入該文件（注意路徑就ok）

<script type="text/javascript" src="/static/config.js"></script>

3.而後你就能夠在你須要的地方隨意獲取就好了，好比

var baseURLStr = window.g.ApiUrl
// 建立axios實例
const service = axios.create({
  baseURL: baseURLStr, // api的base_url
  timeout: 5000 // 請求超時時間
})

 

4.最後在打包成功以後，config,js文件不會被打包，依然存在static文件夾下，若是須要修改只須要用記事本打開文件修改地址就OK了，並且該方法也不會影響開發模式。