diff options
| -rw-r--r-- | .env | 2 | ||||
| -rw-r--r-- | README.md | 20 | ||||
| -rw-r--r-- | src/layouts/BasicLayout.tsx | 10 | ||||
| -rw-r--r-- | src/router.ts | 8 | ||||
| -rw-r--r-- | vite.config.ts | 11 |
5 files changed, 42 insertions, 9 deletions
@@ -0,0 +1,2 @@ +VITE_ROUTER_MODE=hash +VITE_BASE_URL=/ @@ -2,6 +2,26 @@ This template provides a minimal setup to get React working in Vite with HMR and some Oxlint rules. +## 路由模式 + +通过 `VITE_ROUTER_MODE` 选择路由模式： + +- `.env` 默认设置 `hash`，地址示例为 `/#/about/me`。 +- `.env.local` 可设置 `history`，地址示例为 `/about/me`。此文件已被 Git 忽略。 +- `.env.local` 同时影响本地开发和本地构建；需要构建 Hash 版本时运行 `VITE_ROUTER_MODE=hash pnpm build`。 + +修改环境变量后需重启开发服务或重新构建。History 模式需要服务器配置前端路由回退，并确保深层 URL 下的资源路径正确。 + +## 资源基础路径 + +通过环境变量 `VITE_BASE_URL` 配置 Vite 的 `base`，默认值为 `/`。可在 `.env.local` 中覆盖： + +```dotenv +VITE_BASE_URL=./ +``` + +`./` 适用于 Hash 路由的相对资源部署；History 路由建议使用 `/` 或明确的部署子目录，例如 `/app/`。部署到子目录时，还需配套设置路由的 `basename`。 + Currently, two official plugins are available: - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs) diff --git a/src/layouts/BasicLayout.tsx b/src/layouts/BasicLayout.tsx index 9851fd4..512da63 100644 --- a/src/layouts/BasicLayout.tsx +++ b/src/layouts/BasicLayout.tsx @@ -14,7 +14,7 @@ import { useMantineTheme, } from '@mantine/core' import { useDisclosure, useMediaQuery } from '@mantine/hooks' -import { CaretLeftIcon, CaretRightIcon } from '@phosphor-icons/react' +import { SidebarSimpleIcon } from '@phosphor-icons/react' import { NavLink as RouterNavLink, Outlet, useLocation, useMatches } from 'react-router' import { pageRoutes } from '../routes.ts' import type { PageRoute } from '../routes.ts' @@ -181,9 +181,11 @@ export function BasicLayout() { aria-expanded={sidebarOpened} aria-controls="desktop-navigation" > - {sidebarOpened - ? <CaretLeftIcon size={20} aria-hidden="true" /> - : <CaretRightIcon size={20} aria-hidden="true" />} + <SidebarSimpleIcon + size={20} + weight={sidebarOpened ? 'fill' : 'regular'} + aria-hidden="true" + /> </ActionIcon> <Burger opened={opened} diff --git a/src/router.ts b/src/router.ts index 32870e2..0e6facd 100644 --- a/src/router.ts +++ b/src/router.ts @@ -1,8 +1,12 @@ -import { createBrowserRouter } from 'react-router' +import { createBrowserRouter, createHashRouter } from 'react-router' import { BasicLayout } from './layouts/BasicLayout.tsx' import { pageRoutes } from './routes.ts' -export const router = createBrowserRouter([ +const createRouter = import.meta.env.VITE_ROUTER_MODE === 'history' + ? createBrowserRouter + : createHashRouter + +export const router = createRouter([ { path: '/', Component: BasicLayout, diff --git a/vite.config.ts b/vite.config.ts index 9982072..e7854a1 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,7 +1,12 @@ import react from '@vitejs/plugin-react' -import { defineConfig } from 'vite' +import { defineConfig, loadEnv } from 'vite' // https://vite.dev/config/ -export default defineConfig({ - plugins: [react()], +export default defineConfig(({ mode }) => { + const env = loadEnv(mode, process.cwd()) + + return { + base: env.VITE_BASE_URL || '/', + plugins: [react()], + } }) |