JavaScript 中怎么用 Vite 配置单页面应用的构建输出目录-js教程-PHP中文网

Vite 中配置 SPA 构建输出目录需设置 build.outDir，如 outDir: 'output'，并配合 base 保证路由与资源路径一致；构建产物自动创建，需服务端支持 history 路由 fallback。

javascript 中怎么用 vite 配置单页面应用的构建输出目录

在 Vite 中配置单页面应用（SPA）的构建输出目录，主要通过修改 vite.config.js 中的 build.outDir 选项实现。默认输出到 dist 目录，你可以按需自定义。

修改 build.outDir 指定输出路径

在项目根目录的 vite.config.js 文件中，设置 build.outDir 为任意相对或绝对路径（推荐相对路径）：

使用字符串直接指定，例如：outDir: 'build' 会将构建产物输出到项目根下的 build/ 目录
支持嵌套路径，如 outDir: 'public/dist'（注意：不建议覆盖 public 目录本身，但可写入其子目录）
路径会自动创建，无需提前手动新建目录

确保 SPA 路由和基础路径兼容

如果你改了输出目录，但应用是基于 history 模式的前端路由（如 Vue Router 或 React Router），还需检查以下两点：

java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载

base 配置要与部署路径一致。例如，若最终部署在 https://example.com/myapp/，则设 base: '/myapp/'
build.outDir 只影响构建时文件存放位置，不影响运行时 URL 路径；base 才决定资源加载前缀和路由基准
如果只是本地开发或静态托管（如 GitHub Pages、Nginx 根目录），通常 base: '/' 即可

完整配置示例

一个典型的 SPA 配置片段如下：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'output', // ✅ 自定义输出目录为 output/
    emptyOutDir: true // 构建前清空该目录（默认 true）
  },
  base: './' // ✅ 用相对路径 base，适合本地打开 index.html 或子目录部署
})