在 vite 项目中配置 base 路径，需要在 vite.config.js 文件中将 base 选项设置为所需的字符串。如果应用部署在服务器的根目录，使用默认值 '/'；如果部署在子目录（例如 /app/），则必须显式设置为 '/app/'。这一配置会统一影响构建后的静态资源引用路径和路由前缀。
如何配置子目录部署的 base 路径
当你的应用需要部署到非根路径时，比如 /my-app/，你需要修改配置文件中的 base 属性。这告诉 Vite 在生成 HTML 和资源链接时，自动加上这个前缀。如果不配置，Vite 默认假设应用在根目录，导致所有资源 404 错误。
// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
// 设置基础路径，注意末尾斜杠
base: '/my-app/',
})
上述代码展示了最基础的配置方式。构建后，所有 <script></script> 和 标签都会以 /my-app/ 开头。确保服务器也正确配置了该路径的重写或静态文件服务。
base 路径对路由的影响及处理
配置 base 不仅影响静态资源，还会影响前端路由器的行为。如果你使用的是 vue-router 或 react-router，通常也需要相应地配置路由模式或前缀，以确保导航正确。例如，在 Vue 中，如果使用 hash 模式，则不受 base 影响太大；如果使用 history 模式，则需要确保路由匹配包含 base 前缀。
// vue-router 示例
const router = createRouter({
history: createWebHistory('/my-app/'), // 需与 vite base 一致
routes: [...]
})
这里的关键是保持 vite.config.js 中的 base 和路由器初始化时的历史基路径完全一致。否则，点击链接可能导致页面刷新或 404。对于 React，如果使用 BrowserRouter，通常不需要额外配置前缀，但服务器端必须能处理 /my-app/ 下的所有路由回退到 index.html。
动态 base 路径的配置场景
在某些 CI/CD 或动态部署场景中，你可能希望根据环境变量动态设置 base。Vite 支持在配置文件中读取环境变量。你可以定义一个变量，如 VITE_BASE_PATH，并在构建时传入。这样，同一份代码可以部署到不同的子目录而无需修改源码。
// vite.config.js
import { defineConfig, loadEnv } from 'vite'
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd(), '')
return {
base: env.VITE_BASE_PATH || '/',
plugins: []
}
})
这种写法允许你在 .env 文件或命令行中指定 VITE_BASE_PATH=/staging/。构建产物会自动适配该路径。注意，环境变量必须以 VITE_ 开头才能被 Vite 暴露给客户端代码。这种方式提高了配置的灵活性，适用于多环境部署。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
