我已經使用create-react-app構建了一個應用程式。并且我們的服務器設定為除此之外的所有檔案index.html都位于名為static的檔案夾中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg xml" href="./static/favicon.f99d69b1.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>App</title>
<script type="module" crossorigin src="./static/index.81e5d079.js"></script>
<link rel="modulepreload" href="./static/vendor.ba9c442b.js">
<link rel="stylesheet" href="./static/index.f28d7853.css">
</head>
<body>
<div id="root"></div>
</body>
</html>
所以JS檔案的路徑是./static/js/main.836d2eb0.js.
你可能知道，Vite 的默認資產目錄叫做 assets。我設法static通過更改build.assetsDir為staticvite.config.js將其更改為
build: {
assetsDir: "static",
outDir: "./../backend/src/main/resources/static/app/",
},
我還更改了輸出目錄。
運行后npm run build，所有檔案都生成在正確的目錄中。但是，CSS、JS 和其他資產的路徑錯誤，例如，我的 JS 檔案的路徑是/static/vendor.ba9c442b.js 它在第一個 slush 之前缺少點 (.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg xml" href="/static/favicon.f99d69b1.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fiken Kundest?tte</title>
<script type="module" crossorigin src="/static/index.81e5d079.js"></script>
<link rel="modulepreload" href="/static/vendor.ba9c442b.js">
<link rel="stylesheet" href="/static/index.f28d7853.css">
</head>
<body>
<div id="root"></div>
</body>
</html>
后端是一個 Spring Boot 應用程式。
那么如何修復檔案的路徑呢？
uj5u.com熱心網友回復：
base將URL配置為./：
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
base: './', ??
})
演示
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/429358.html