如何配置Vite使用相对路径，使静态站点可在任意目录运行？

直接把Vite的base配置设为相对路径即可，具体有两种实现方式：

方式一：修改package.json的build命令 #

把原来的绝对路径base替换为./，这样构建后的所有资源都会以当前目录为基准加载：

"scripts": {
    "dev": "vite",
    "build": "vite build --base=./"
}

方式二：在Vite配置文件中设置更持久的base（推荐） #

在项目根目录的vite.config.js（或vite.config.ts）里直接配置base参数，这样不用每次在命令行指定，配置更集中：

// vite.config.js
export default {
    base: './',
    // 你的其他Vite配置项...
}

对应的package.json里的build命令可以简化为：

"scripts": {
    "dev": "vite",
    "build": "vite build"
}

额外注意事项 #

• 确保项目内的资源引用都用相对路径：比如图片、CSS背景图等，不要写/assets/img/logo.png这种绝对路径，改用./assets/img/logo.png或assets/img/logo.png
• 如果用了前端路由（比如Vue Router、React Router），建议切换为哈希模式：因为历史模式需要服务器做路径重写，而纯静态文件放在任意目录时，哈希路由不需要服务器配置就能正常跳转（比如Vue3用createWebHashHistory()，React用HashRouter）

内容的提问来源于stack exchange，提问作者Kokodoko