Vite

Question

我使用 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。

你可能知道，Vite默认的资产目录叫做assets。我设法通过在 vite.config.js

中将 build.assetsDir 更改为 static 来将其更改为 static

  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启动应用程序。

那么如何修复文件的路径？

Answer 1

配置 base URL 为 ./:

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  base: './', 
})

demo

Vite - 更改静态资源目录

Vite - change static assets' directoy

spring

reactjs

vue.js

那么如何修复文件的路径？