Vite 配置指南：base 选项详解

本文详细介绍 Vite 配置中的 base 选项，这是控制项目公共基础路径的关键配置，适用于开发和生产环境。

base 配置详解

基本属性

• 类型: string
• 默认值: /
• 相关配置: server.origin

功能说明

base 用于指定项目在开发或生产环境下的公共基础路径。有效的配置值包括：

• 绝对 URL 路径名，例如 /foo/
• 完整 URL，例如 https://bar.com/foo/（开发环境下 origin 部分不会被使用，效果等同于 /foo/）
• 空字符串或 ./（用于嵌入式部署场景）

使用场景

1. 子路径部署

当应用需要部署在域名的子路径下时：

// vite.config.js
export default defineConfig({
  base: '/my-app/',
})

此时，所有资源引用都会自动添加 /my-app/ 前缀。

2. CDN 部署

使用 CDN 加速静态资源时：

export default defineConfig({
  base: 'https://cdn.example.com/assets/',
})

3. 嵌入式部署

对于需要嵌入到其他页面的应用：

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

使用相对路径 ./ 可以确保资源引用相对于当前页面路径解析。

注意事项

1. 路径格式: 确保 base 以斜杠 / 开头和结尾（除非是 ./ 或空字符串）
2. 开发环境: 完整 URL 的 origin 部分在开发时会被忽略
3. 资源引用: 配置后，Vite 会自动处理 HTML、CSS、JS 中的资源路径

相关文档

更多详细信息请参考 Public Base Path 指南。

本文内容整理自 Vite 官方文档 Shared Options 章节。