Vite构建React PWA时如何指定服务器子目录作为资源路径？

问题根源是Vite默认将资源路径设为网站根目录（/），部署到/pwa子目录时需手动指定基础路径，具体修改方式如下：

1. 修改Vite配置文件
   在项目根目录的vite.config.js（或vite.config.ts）中，添加base配置项，值设为子目录路径'/pwa/'：

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

export default defineConfig({
  base: '/pwa/', // 核心配置：指定部署的子目录前缀
  plugins: [
    react(),
    VitePWA({
      manifest: {
        start_url: '/pwa/', // 同步修改PWA的启动路径，避免跳转错误
        // 其他PWA manifest配置项...
      }
    })
  ]
});

2. 环境适配（可选）
   若需区分开发环境和生产环境的路径，可通过环境变量动态设置：

base: process.env.NODE_ENV === 'production' ? '/pwa/' : '/'

3. 验证效果
   重新执行npm run build，查看dist目录下的index.html，所有资源引用路径会自动带上/pwa/前缀（比如/pwa/assets/main.xxx.js），部署到服务器的/pwa目录后即可正常加载资源。

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