關於在vue-cli 打包時，抽離專案相關設定檔的問題（詳細教學）

下面我就為大家分享一篇基於vue-cli 打包時抽離項目相關配置文件詳解，具有很好的參考價值，希望對大家有所幫助。

前言：當使用vue-cli進行開發時常需要動態配置一些設置，例如接口的請求地址（axios.defaults.baseURL），這些設置可能需要在專案編譯後再進行設置的，所以在vue-cli裡我們需要對這些設定檔進行抽離，不讓webpack把設定檔也進行編譯。

首先，我們需要在/static 下面新建一個js檔案作為設定檔

#裡面的內容如下：

window.g={
 AXIOS_TIMEOUT:10000,
 SERVICE_CONTEXT_PATH:`http://10.200.199.84:9090/`//配置服务器地址
}

這裡將所有的配置注入到window物件的一個屬性裡面，你可以自訂這個屬性

然後在index.html裡面引入這個js

<script src="/static/js/config.js"></script>

在專案中使用時，直接使用window.g去呼叫這個設定檔的內容。

如此配置之後進行打包時，會產生這樣的效果

#可以看到這裡的設定檔會原樣輸出不會打包，那麼當我們把編譯好的前端工程交給部署人員去部署的時候，就不用事先問號後台位址了，部署人員可以直接透過修改配置裡面的內容去決定伺服器的位址。

所以透過這種方式可以把專案相關設定檔抽離開來

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

JavaScript滿天星導覽列實作方法

#vue.js的computed,filter,get,set的用法及區別詳解

詳解從購買網域到使用pm2部署node.js專案全過程

以上是關於在vue-cli 打包時，抽離專案相關設定檔的問題（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！