用code server 啟動的疑難.

[raychunghk]

我使用家中的 NAS，透過 Docker container 運行 Code Server 作為 VS Code 的替代方案。因此，當我需要除錯 React 應用程式時，必須添加 basepath 或 base URL。例如，localhost:5173 必須改為 https://codeserver.myNAS.com/proxy/5173。

目前我的應用程式勉強可以運作，具體做法是修改兩個檔案：index.tsx 和 vite.config.js。

我的問題如下：

1. vite.config.js 是否遺漏了 base 設定？ 我的 vite.config.js 已經設定了 base: basePath，其中 basePath 為 /proxy/5173。 請問這樣設定正確嗎？

2. 重複的 basepath 問題： 當我開啟網頁時，系統會意外地重複 basepath 多次。例如，開啟 /proxy/5173 會變成 /proxy/5173/proxy/5173，但應用程式仍然可以正常運作。我嘗試多次調整 basename 和 vite.config.js，但問題依然存在。

以下是我的程式碼片段：

1. index.tsx:

<React.StrictMode>
  <BrowserRouter basename={'/proxy/5173/'}>
    <Suspense fallback={<Loading />}>
      <Routes>
        {isMobile ? (
          <Route path="/*" element={<Navigate to="/mobile" />} />
        ) : (
          <>
            <Route index element={<TypingPage />} />
            <Route path="/gallery" element={<GalleryPage />} />
            <Route path="/analysis" element={<AnalysisPage />} />
            <Route path="/error-book" element={<ErrorBook />} />
            <Route path="/friend-links" element={<FriendLinks />} />
            <Route path="/*" element={<Navigate to="/" />} />
          </>
        )}
        <Route path="/mobile" element={<MobilePage />} />
      </Routes>
    </Suspense>
  </BrowserRouter>
</React.StrictMode>

2. vite.config.js:

import react from '@vitejs/plugin-react'
import { promises as fs } from 'fs'
import { getLastCommit } from 'git-last-commit'
import jotaiDebugLabel from 'jotai/babel/plugin-debug-label'
import jotaiReactRefresh from 'jotai/babel/plugin-react-refresh'
import path from 'node:path'
import { visualizer } from 'rollup-plugin-visualizer'
import Icons from 'unplugin-icons/vite'
import type { PluginOption } from 'vite'
import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig(async ({ mode }) => {
  const latestCommitHash = await new Promise<string>((resolve) => {
    return getLastCommit((err, commit) => (err ? 'unknown' : resolve(commit.shortHash)))
  })

  const basePath = '/proxy/5173'
  console.log(`basePath: ${basePath}`)
  // Set the base path dynamically based on the environment

  return {
    base: basePath, // Set the deployment base path

    plugins: [
      react({ babel: { plugins: [jotaiDebugLabel, jotaiReactRefresh] } }),
      visualizer() as PluginOption,
      Icons({
        compiler: 'jsx',
        jsx: 'react',
        customCollections: {
          'my-icons': {
            xiaohongshu: () => fs.readFile('./src/assets/xiaohongshu.svg', 'utf-8'),
          },
        },
      }),
    ],
    build: {
      minify: true,
      outDir: 'build',
      sourcemap: false,
    },
    esbuild: {
      drop: mode === 'development' ? [] : ['console', 'debugger'],
    },
    define: {
      REACT_APP_DEPLOY_ENV: JSON.stringify(process.env.REACT_APP_DEPLOY_ENV),
      LATEST_COMMIT_HASH: JSON.stringify(latestCommitHash + (process.env.NODE_ENV === 'production' ? '' : ' (dev)')),
    },
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
      },
    },
    css: {
      modules: {
        localsConvention: 'camelCaseOnly',
      },
    },
  }
})

懇請協助解決這些問題。