关键在于vite.config.ts中设置base路径（如base: '/admin/'）与nginx location配置严格匹配，并通过try_files实现spa路由兜底，二者缺一不可。
要让 TypeScript + Vite 项目正确支持二级目录（如 /admin/、/portal/）部署，关键在于两处协同：Vite 构建时生成带前缀的资源路径，以及 Nginx（或其他服务器）能正确映射并兜底路由。单独改一处会出 404 或资源加载失败。
1. vite.config.ts 中设置 base 路径
这是最核心的一步。base 必须与你实际部署的子路径完全一致，且以斜杠开头和结尾：
- 若部署在
https://example.com/admin/，则设base: '/admin/' - 若部署在
https://example.com/my-app/，则设base: '/my-app/' - 不要写成
'./admin/'或'admin/'—— 这会导致相对路径解析错误或刷新 404
配置示例（TypeScript 版）：
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
base: '/admin/', // ✅ 与 Nginx location 严格对应
plugins: [vue()],
});
2. 构建后验证 dist/index.html 是否生效
运行 npm run build 后，打开 dist/index.html，检查所有 script、link 标签的 src 和 href 属性是否自动加上了 /admin/ 前缀，例如：
<script type="module" src="/admin/assets/index-abc123.js"></script><link rel="stylesheet" href="/admin/assets/style-def456.css">
如果仍是 assets/... 或 ./assets/...，说明 base 没生效——请确认配置文件是 vite.config.ts（不是 .js），且已重启构建命令。
3. Nginx 配置必须匹配且启用 SPA 重定向
location 路径、alias 目录、try_files 回退路径三者需对齐：
-
location /admin/→ 必须和 Vite 的base完全一致 -
alias /var/www/my-vue/dist/;→ 注意 alias 结尾不加斜杠，且指向dist目录本身（不是dist/子目录） -
try_files $uri $uri/ /admin/index.html;→ 最后一项的路径前缀也必须是/admin/，否则 Vue Router 刷新会 404
完整片段示例：
location /admin/ {
alias /var/www/my-vue/dist/;
try_files $uri $uri/ /admin/index.html;
}
4. TypeScript 类型与别名不受影响，但需保持 resolve.alias 独立
base 路径只影响运行时资源 URL，不影响源码中的模块导入。@/ 别名等仍由 resolve.alias 控制，可照常配置：
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
}
}
如果你同时用了 tsconfig.json 的 "paths"，建议搭配 vite-tsconfig-paths 插件，确保开发与构建时路径解析行为一致。
