近期同事接到一個略微罕見的請求，希望能在Vue項目中添加配置文件，以解決每一次環(huán)境搭建都需要修改請求IP然后再重新打包的問題。我知道有人想問為什么要頻繁搭建新的后臺環(huán)境，我當(dāng)然是...不會告訴你們的。
必要性分析
剛聽到這個需求的時候，我第一反應(yīng)是：這個真的有必要嗎？又不會真的天天換環(huán)境，況且比起環(huán)境搭建，build一次的時間占比其實是微乎其微的。沒有但是，我第二反應(yīng)也是第一次那么想的...
不過需求就是需求，再者后來也了解到每一次build都是我開發(fā)同事完成的然后發(fā)包給運維，這樣對客戶不是很友好，故開始認(rèn)真思考這個問題。
思考?xì)v程
我首先想到的是需要搭建一個服務(wù)，不然js如何取讀取文件呢？啟一個讀配置的服務(wù)，但我又要怎么將配置賦值給vuex（接口公共的IP和端口都放到這里的）中的某個變量呢？是的變量替換，但是變量替換又涉及打包后代碼變量已經(jīng)不能識別問題...
a few minutes later，我想到可以用js充當(dāng)配置文件，這樣就可以直接獲取配置，那么剩下的問題就是如何避免該文件被打包。正好當(dāng)時又在segmentfault中看到有人說/static/目錄不會被webpack打包，那么思路就清晰了：在/static/目錄下**新增一個config.js作為配置公共參數(shù)的文件，然后在項目中引用。
怎么做？
- 在Vue項目中的
/static/目錄下新增文件config.js，用以存儲一些可配置的參數(shù)。
config.js - 在
index.html中引用該js,<script src="/static/config.js"></script> - 在eslintrc.js中設(shè)置全局變量，否則在使用時eslint會報錯：
no-undef未定義變量。
eslint設(shè)置 -
這里設(shè)置的全局變量可以賦值給vuex中的某個變量聲明，這樣更容易理解，別人也就不會疑惑config從哪里來。
vuex中應(yīng)用全局變量，給狀態(tài)量賦值
配置文件中的config.test就已經(jīng)能在項目中使用了。
打包后
config.js文件在/dist/static/目錄下，如果你在其中配置了接口的IP，那么當(dāng)更換了服務(wù)器，則只需修改/dist/static/目錄下的config.js就可以正常運行項目了。
