vite 构建始终使用静态路径

nor*_*man 53 vite

我有一个简单的设置,包含一个 index.html、一些 js 文件和一个 sass 文件,并使用 vite 构建它。我使用的是 vite 默认值,没有配置文件。

运行构建后,dist 文件夹中的 index.html 将所有内容引用为静态路径:

<head>
  <script type="module" crossorigin src="/assets/index.b850bc1f.js"></script>
  <link rel="stylesheet" href="/assets/index.04d1c13d.css">
</head>
Run Code Online (Sandbox Code Playgroud)

css 中的 url() 路径也发生同样的情况:它们也变成静态路径。我的问题是:是否有一个配置选项可以使 vite 输出相对路径,所以:

<head>
  <script type="module" crossorigin src="assets/index.b850bc1f.js"></script>
  <link rel="stylesheet" href="assets/index.04d1c13d.css">
</head>
Run Code Online (Sandbox Code Playgroud)

ton*_*y19 118

此引导路径是基本 URL,由base选项配置,/默认情况下。

您可以通过设置为空字符串来删除基本 URL base,使路径相对于其部署目录:

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

export default defineConfig({
  base: '', 
})
Run Code Online (Sandbox Code Playgroud)

演示

  • 完美的!`base: './'` 也有效!我喜欢明确说明相对路径,它还向我未来的开发人员和我自己表明了基础(以防我需要 CTRL-F)。 (7认同)
  • 对我来说,静态路径不会改变。 (2认同)