vue webpack打包之后 重新修改配置文件接口API路徑,無需修改代碼后再打包

用vue-cli構建的項目通常是采用前后端分離的開發模式，也就是前端與后台完全分離，此時就需要將后台接口地址打包進項目中，但是有的時候需要修改接口地址，為了避免為了修改接口地址而進行修改代碼后再重新打包的繁瑣，解決呢方法很多，推薦一種最便捷的方法，也是最容易操作的方法，親測有用！

 

1.首先我們在public目錄下的static文件下建立一個config.js文件，內容如下：

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

2.接下來我們在public目錄下的index.html這個入口文件里引入該文件（注意路徑）

<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了，而且該方法也不會影響開發模式，是不是很簡單有效呢，快去嘗試一下吧：
5.最后再教一個運行打包后的dist靜態文件的方法哈，如下：

　　測試：安裝http-server或者anywhere 搭建web服務器環境(建議使用anywhere)

npm install anywhere -g

6.在打包后的dist文件下打開命令行 輸入anywhere，瀏覽器會自己打開，這時你打包好的項目就相當於在服務器上運行了，這時你再修改static文件下config.json里面的地址，刷新網頁，你會發現地址已經更改為你剛改的地址了。

 

恭喜你又學到了一招半式！！！！！   點個贊再走哈！！