配置根目录与公共基础路径

Vite 通过 root 和 base 配置项目根目录和资源基础路径，适应不同的项目结构和部署需求。

root 配置

root 指定项目根目录，影响配置文件和 index.html 的查找位置：

import { defineConfig } from 'vite'

export default defineConfig({
  // 默认为当前工作目录
  root: './'

  // 指定子目录为根目录
  root: './src'
})

base 配置

base 指定公共基础路径，影响所有资源引用：

export default defineConfig({
  // 默认 '/'
  base: '/'

  // 子目录部署
  base: '/my-app/'

  // CDN 部署
  base: 'https://cdn.example.com/'
})

base 对资源的影响

<!-- base: '/' -->
<script type="module" src="/src/main.js"></script>

<!-- base: '/my-app/' -->
<script type="module" src="/my-app/src/main.js"></script>

<!-- base: 'https://cdn.example.com/' -->
<script type="module" src="https://cdn.example.com/src/main.js"></script>

常见配置场景

注意：base 必须以斜杠开头和结尾，如 '/my-app/'。

示例配置

import { defineConfig } from 'vite'

export default defineConfig({
  root: './src',
  base: '/my-app/'
})

要点总结

• root 指定项目根目录
• base 指定资源公共路径
• base 影响所有静态资源引用
• 子目录部署需正确配置 base