webpack 打包vue項目后生成一個可修改接口地址的配置文件捧灰。
當(dāng)我們做完vue項目打包淆九、轉(zhuǎn)測試、部署后毛俏,卻遇到修改接口地址炭庙,或修改域名。但是在npm run build 之后所生成的 dist 文件也是寫死的了煌寇。我們就需要回來重新修改焕蹄,重新打包。
所以最好解決方案就是有個 config 文件方便我們管理這些阀溶。
一腻脏、第一種方法
此方法其實就是在 vue-cli 里把我們需要配置修改的文件直接進(jìn)行抽離,不讓 webpack 把配置文件進(jìn)行編譯银锻。
-
第一步:在 static 文件夾下新建一個名為 config.js 的文件
接下來 就是配置 config 的內(nèi)容啦
這里將所有的配置注入到window對象的一個屬性里面迹卢,我們可以自定義這個屬性
-
第二步:在index.html里面引入這個config.js
-
第三步:我們配置好之后就可直接調(diào)用
在我們打包之后 可以看到 config 文件會原樣輸出并沒有被打包。 這樣當(dāng)我我們把項目交給部署人員的時候徒仓,部署人員可以直接通過該文件來修改配置內(nèi)容啦腐碱。
二、第二種方法
借助插件 generate-asset-webpack-plugin 。在webpack.prod.conf.js中去生成configServer.json文件症见,讓其在build的時候生成json文件喂走,然后再使用axios異步獲取json,替換url即可谋作。相比之下芋肠,第一種更簡單。