如何配置Vite构建输出的基础路径以适配子目录部署？

直接在Vite的配置文件里设置base选项就能搞定：

• 找到项目根目录下的vite.config.js（或vite.config.ts），添加base配置项，值设为你的部署子目录路径'/docs/reconstatus/'
• 配置示例：

  import { defineConfig } from 'vite'
  // 根据你的项目框架引入对应插件，比如Vue、React等
  import vue from '@vitejs/plugin-vue'
  
  export default defineConfig({
    plugins: [vue()],
    base: '/docs/reconstatus/' // 指定资源基础路径
  })
  

配置完成后执行npm run build，生成的dist目录里的资源路径都会自动带上/docs/reconstatus/前缀，和你的部署路径匹配，不会再出现404错误。而且这个配置只影响构建产物，本地开发时npm run dev依然可以正常访问http://localhost:3000，不需要额外调整。

内容的提问来源于stack exchange，提问作者omega