如何让Vue Cli项目与子目录旧静态站点独立共存？

我来帮你搞定这个问题！核心思路是让服务器优先处理/old-site/路径的请求，直接返回旧站点的静态文件，而不是把请求转发给Vue的入口文件（index.html）。下面分两种最常用的服务器场景给出具体方案：

1. Nginx 配置方案 #

编辑你的Nginx站点配置文件（通常在/etc/nginx/sites-available/或类似路径），在server块中先添加针对/old-site/的规则，确保它优先匹配：

# 优先处理旧站点请求，直接返回静态文件
location /old-site/ {
    # 这里填写你的web根目录（Vue项目和旧站点所在的上级目录）
    root /var/www/html;
    # 尝试匹配请求的文件或目录，找不到才返回404
    try_files $uri $uri/ =404;
}

# Vue项目的history模式配置（放在旧站点规则之后）
location / {
    try_files $uri $uri/ /index.html;
}

解释：Nginx的规则是按顺序匹配的，所以/old-site/的请求会被优先拦截，直接去对应目录读取静态文件，完全不经过Vue的处理流程。

2. Apache 配置方案 #

如果你使用Apache服务器，修改Vue项目根目录下的.htaccess文件，添加旧站点的规则来跳过Vue的重写逻辑：

# 先拦截所有/old-site/开头的请求，停止后续重写规则
RewriteRule ^old-site/ - [L]

# 以下是Vue history模式的默认重写规则
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

解释：[L]标记表示这是最后一条匹配规则，所有以old-site/开头的请求会直接由Apache处理静态文件，不会转发到Vue的index.html。

可选：优化Vue Router规则 #

虽然服务器配置已经能解决核心问题，但你可以给Vue Router的通配符路由加个限制，避免它在本地开发或服务器配置未生效时误拦截旧站点请求：

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', name: 'AppHome', component: AppHome },
    // 只匹配不以old-site开头的路径
    { path: '/:path(^(?!old-site).*)', name: 'AppError', component: AppError }
  ]
})

最后注意事项 #

• 确保旧站点的文件确实放在服务器web根目录下的old-site子文件夹中（比如Nginx配置里的/var/www/html/old-site/）。
• 修改服务器配置后，记得重启Nginx或Apache服务使配置生效。

内容的提问来源于stack exchange，提问作者Michael Giovanni Pumo