關(guān)于在vue-cli打包時(shí)，抽離項(xiàng)目相關(guān)配置文件的問題（詳細(xì)教程）

前言：當(dāng)使用vue-cli進(jìn)行開發(fā)時(shí)時(shí)常需要?jiǎng)討B(tài)配置一些設(shè)置，比如接口的請(qǐng)求地址（axios.defaults.baseURL），這些設(shè)置可能需要在項(xiàng)目編譯后再進(jìn)行設(shè)置的，所以在vue-cli里我們需要對(duì)這些配置文件進(jìn)行抽離，不讓webpack把配置文件也進(jìn)行編譯。

首先，我們需要在/static 下面新建一個(gè)js文件作為配置文件

里面的內(nèi)容如下：

window.g={
 AXIOS_TIMEOUT:10000,
 SERVICE_CONTEXT_PATH:`http://10.200.199.84:9090/`//配置服務(wù)器地址
}

這里將所有的配置注入到window對(duì)象的一個(gè)屬性里面，你可以自定義這個(gè)屬性

然后在index.html里面引入這個(gè)js

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

在項(xiàng)目中使用時(shí)，直接使用window.g去調(diào)用這個(gè)配置文件的內(nèi)容。

如此配置之后進(jìn)行打包時(shí)，會(huì)產(chǎn)生這樣的效果

可以看到這里的配置文件會(huì)原樣輸出不會(huì)打包，那么當(dāng)我們把編譯好的前端工程交給部署人員去部署的時(shí)候，就不用事先問號(hào)后臺(tái)地址了，部署人員可以直接通過修改配置里面的內(nèi)容去決定服務(wù)器的地址。

所以通過這種方式可以把項(xiàng)目相關(guān)配置文件抽離開來

上面是我整理給大家的，希望今后會(huì)對(duì)大家有幫助。

相關(guān)文章：

JavaScript滿天星導(dǎo)航欄實(shí)現(xiàn)方法

vue.js的computed,filter,get,set的用法及區(qū)別詳解

詳解從買域名到使用pm2部署node.js項(xiàng)目全過程

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com