Vue项目部署到二级目录需同步配置：Vue Router的base、vue.config.js的publicPath（Vite为base）、Nginx的alias与try_files，三者路径必须完全一致（如'/admin/'），否则导致资源404、白屏或刷新404。
Vue 项目部署到二级目录（比如 https://example.com/admin/）时，仅改路由 path 是不够的，必须让整个前端路径体系对齐：资源加载路径、HTML 中 base 标签、Vue Router 的 base 配置三者一致。否则会出现白屏、404、跳转后刷新 404 等典型问题。
一、Vue Router 必须显式设置 base
Vue Router 的 base 选项是历史模式下所有路由的公共前缀，它直接影响 URL 解析和导航行为。不设或设错，深层路由（如 /admin/dashboard）将无法匹配。
- 使用 Vue Router 3（Vue 2）：在
src/router/index.js中传入base: '/admin/' - 使用 Vue Router 4（Vue 3）：在
createRouter的history参数中指定，例如：createWebHistory('/admin/') - 推荐按环境区分：开发时用根路径，生产才加二级目录，避免本地调试异常
base: process.env.NODE_ENV === 'production' ? '/admin/' : '/'
二、vue.config.js 同步配置 publicPath
publicPath 决定构建后所有静态资源（JS/CSS/图片）的引用前缀。它必须与 Router 的 base 完全一致，否则 HTML 加载的 JS 文件地址会变成 /js/app.js，而实际位于 /admin/js/app.js，直接 404。
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 设为带前后斜杠的完整子路径：
publicPath: '/admin/' - 不要写成
'./admin/'或'admin/'，前者导致相对路径混乱，后者被当作相对路径处理 - 若使用 Vite，对应配置项是
base: '/admin/'（在vite.config.js中）
三、index.html 补充 meta base（可选但推荐）
虽然不是强制项，但在 public/index.html 的 <head> 中添加：<meta name="base" content="/admin/">
有助于部分插件、第三方 SDK 或调试工具识别当前上下文路径，尤其在混合部署或多项目共存时更稳妥。
立即学习“前端免费学习笔记（深入）”；
四、Nginx 配置需配合 alias + try_files
前端设好 base 只解决“怎么发请求”，后端要解决“怎么正确响应”。Nginx 必须用 alias（不是 root）指向 dist 目录，并通过 try_files 实现 history fallback：
-
location /admin/ { alias /var/www/myapp/dist/; }—— 注意 alias 结尾有斜杠，且路径指向 dist 目录本身 -
try_files $uri $uri/ /admin/index.html;—— 所有未命中静态文件的请求，都返回/admin/index.html，交由前端路由接管 - 切勿使用
root /var/www/myapp/dist;，否则请求/admin/js/app.js会被拼成/var/www/myapp/dist/admin/js/app.js，路径多了一层
