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

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

root 配置

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

JavaScript

import { defineConfig } from 'vite'

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

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

配置	说明
root: './'	默认值，当前目录
root: './src'	以 src 为根目录

base 配置

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

JavaScript

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

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

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

base 对资源的影响

HTML

<!-- 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/'
CDN 部署	'https://cdn.xxx.com/'
GitHub Pages	'/repo-name/'

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

示例配置

JavaScript

import { defineConfig } from 'vite'

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

要点总结

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