vite-plugin-base-output

一个用于 Vite 构建产物按 base 目录输出 的小插件。

它解决什么问题

当你把站点部署到子路径（例如 https://example.com/app/）时，通常会配置：

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

此时 Vite 默认仍然输出到：

dist/
  assets/
  index.html

而有些部署环境更希望你的产物目录直接长成：

dist/
  app/
    assets/
    index.html

本插件会在 build 结束后 自动把 dist 下（除隐藏文件与目标目录外）的内容移动到 dist/<base>/ 目录中。

安装

pnpm add -D vite-plugin-base-output

使用

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import baseOutput from 'vite-plugin-base-output'

export default defineConfig({
  base: '/app/',
  plugins: [
    vue(),
    baseOutput(),
  ],
})

也支持直接传入字符串（会覆盖 config.base）：

plugins: [
  vue(),
  baseOutput('/app/'), // 也可以 baseOutput('app')
]

行为说明

• 优先级：
  • 如果你调用 baseOutput('xxx/yyy') 并传入了字符串，则以传入值为准（覆盖 config.base）。
  • 否则在 configResolved 阶段读取 config.base。
• base 为 URL 时跳过：如果 base 以 http:// 或 https:// 开头，会直接跳过（不做任何移动）。
• 标准化路径：会把 base 两端的 / 去掉，例如：
  • '/app/' → 'app'
  • 'app/' → 'app'
  • '/' 或 '' → 不处理
• 构建后移动：在 closeBundle 阶段把 dist/*（排除 dist/<base>/ 本身与隐藏文件）移动到 dist/<base>/*。
• 覆盖同名目标：如果目标位置已存在同名文件/目录，会先删除再移动。

示例

输入

• base: '/app/'
• dist/ 初始结构：

dist/
  assets/
  index.html

输出

dist/
  app/
    assets/
    index.html

注意事项

• 只用于 build：它在 closeBundle 执行，适合构建产物整理，不影响 dev server。

License

ISC