使用Vue webpack模板進行環境獨立構建

Question

我使用構建服務器來構建我的Vue項目，使用由Vue 2模板很好地提供的npm run build命令。 Vue模板還提供了訪問可在config目錄下的文件中配置的特定於環境的數據的功能。 例如prod.env.js等。然后，您可以通過process.env.API_PREFIX訪問此數據，如模板手冊中所示。

我希望能夠構建一次代碼，然后將相同的構建（由Dist的輸出定義）部署到多個服務器，但讓不同的服務器使用不同的配置（不同的API_PREFIX等）。 目前， process.env引用在構建時由Webpack編譯器擴展。 因此，我必須為每個環境重建。

我可以想到幾種方法來實現這一點 - 顯然配置的加載必須在運行時進行，並且鑒於它在瀏覽器中運行並且必須引用某個文件，它必須通過AJAX請求Web服務器單獨或類似地提供的一些靜態JSON配置。 但我有興趣知道這里有人會如何處理這個要求。

Answer 1

如果不了解您的具體架構，很難給出具體的建議。 相反，我會留下一些一般性的想法。

為了以理智的方式執行您想要的操作，您可能必須從您為其提供服務的域中派生前綴。

除了在運行時使用window.location之外，還可以使用一些東西：

• 相對路徑/api/myinformation - 前綴將自動從服務前端的域派生。
• 開發期間的本地代理，因為您可能不想在localhost上運行后端https://github.com/vuejs-templates/webpack/blob/master/docs/proxy.md
• 在nginx或類似的代理路徑重寫： https ： //stackoverflow.com/a/3017720/1445812

即使它沒有解決您的具體情況，希望它能讓您了解可用的情況。