Vite项目部署到子目录，路径要怎么配置？-js教程-PHP中文网

必须同时修改 vite.config.js 的 base 和 Nginx 的 location，否则必然 404；base 仅重写资源路径，不处理路由请求匹配，Nginx 需通过 alias + try_files 将子路由 fallback 到 index.html，并确保 Vue/React Router 的 base 与之完全一致。

vite项目部署到子目录，路径要怎么配置？

必须同时改 vite.config.js 的 base 和 Nginx 的 location，缺一不可，否则必然 404。

为什么只改 `vite.config.js` 不行

Vite 构建时用 base 重写所有资源路径（js、css、assets），但不处理路由跳转和服务器请求匹配逻辑。浏览器加载 index.html 后，Vue Router 或 React Router 的 History 模式仍会向根路径发请求，Nginx 找不到对应文件就返回 404。

常见错误现象：

首页能打开，但刷新任意子路由（如 /admin/users）直接 404
控制台报 Failed to load resource: the server responded with a status of 404 ()，且路径是 /js/xxx.js（没带子目录前缀）

所以：base 解决资源路径，location + try_files 解决路由回退。

`vite.config.js` 中 `base` 怎么设才安全

值必须是完整子路径，以 / 开头和结尾，且与 Nginx 的 location 完全一致。

若 Nginx 配置 location /my-app/ { ... }，则 base 必须为 '/my-app/'
不能写成 './my-app'（开发可用，生产构建后资源路径错乱）
不能漏尾部 /：写成 '/my-app' 会导致 /my-app/assets/xxx.js 变成 /my-appassets/xxx.js
多环境建议用 loadEnv 读取 .env.production，避免硬编码

示例（推荐）：

Vite 6.4.5

Vite 6.4.5 历史版本 npm 官方下载，适合旧项目依赖固定、前端开发和生产环境构建。

下载

import { defineConfig, loadEnv } from 'vite'
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd())
  return {
    base: env.VITE_BASE_PATH, // .env.production 中 VITE_BASE_PATH=/my-app/
    plugins: [/* ... */]
  }
})

Nginx `location` 配置关键点

核心不是 root，而是 alias + try_files，否则静态资源 404 或路由无法 fallback。

alias 必须指向 dist 目录的**绝对路径**，且末尾不加 /（与 root 行为相反）
try_files $uri $uri/ /my-app/index.html 中的 /my-app/index.html 路径要跟 base 一致
如果用 root 替代 alias，需把 dist 放在子目录下，例如 /var/www/html/my-app/，再配 root /var/www/html; + location /my-app/ { ... }，但易混淆，不推荐
静态资源缓存规则建议单独加在 location ~* \.(js|css|png|...) 块里，避免影响 HTML 的缓存行为

正确配置片段：

location /my-app/ {
  alias /var/www/my-vue-project/dist/;
  try_files $uri $uri/ /my-app/index.html;
}
location ~* \.(js|css|png|jpg|gif|ico|svg|woff2)$ {
  expires 30d;
  add_header Cache-Control "public, max-age=2592000";
}