我的問題可能很愚蠢，所以請多多包涵。
背景：我有一個專案，其中包含多個作為 BE 的 Java 解決方案和 1 個作為 FE 應用程式的反應應用程式。當我們構建整個解決方案時，會生成一個 war 檔案，我們將其部署在不同的服務器上以加載應用程式。
要求：無論環境如何，我們都需要創建單個戰爭檔案。
問題：我們不能有單獨的構建腳本并生成不同的戰爭檔案，因此創建具有不同值的配置將不起作用。唯一的選擇是讀取 URL 并使用它。但它不會在戰爭年代可用。
env1 網址：https/abcdefg.com/abc/rma/....
env2 網址：https/abcdefg.com/def/rma/....
到目前為止，我們將application_context保存在 env 檔案中，并根據我們正在部署的 env 對其進行更新。如果沒有訪問 webpack 中的 URL，我不知道如何更新它。如果它可以在反應應用程式中完成，我該怎么做？截至目前，如果我將 env1 war 檔案部署到 env2，我會收到此錯誤 -
獲取https/abcdefg.com/abc/rma/script/react-app/vendor/js/index.min.js net::ERR_ABORTED 404
uj5u.com熱心網友回復：
有兩種方法可以解決這個問題。
第一種方法涉及使用<base />標簽和document.write. 這個想法是在不使用任何硬編碼 URL 的情況下生成一個包。添加到index.html檔案中的所有捆綁腳本（可能由html-webpack-plugin）應該是相對 URL。該index.html檔案的標簽中應包含以下代碼head。
<head>
<!-- VERY FIRST STATEMENT -->
<script>
const [_, appname] = window.location.pathname.split('/');
// The trailing slash `/` is important.
document.write(`<base href="/${appname}/" />`);
</script>
<!-- Auto injected by html-webpack-plugin -->
<script src="rma/script/react-app/vendor/js/index.min.js"></script>
</head>
這將導致您rma/script/react-app/vendor/js/index.min.js被加載，https/abcdefg.com/abc/rma/script/react-app/vendor/js/index.min.js因為abc您的應用程式名稱是從 URL 決議的。
但是，使用document.write是反模式并且不鼓勵使用。但優點是您可以使用 Webpack 的散列或chuckhash 作為包名稱，以便在每次新部署時輕松破壞腳本的快取。
第二種方法涉及為您的捆綁腳本撰寫一個異步注入器。在您的index.html中，將以下內容添加到 head 標簽：
<head>
<!-- VERY FIRST STATEMENT -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const [_, appname] = window.location.pathname.split('/');
const script = document.createElement('script');
// Use root relative `src` for the scripts
script.src = `/${appname}/rma/script/react-app/vendor/js/index.min.js`;
document.body.append(script);
});
</script>
</head>
優點是這是更清潔的方法。不利的一面是，您將有輕微的瞬間延遲，并且您不需要預先生成包檔案的名稱，這react-app/vendor/js/index.min.js意味著您將無法使用 Webpack[hash]或[chunkhash] feature。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/492856.html