同一站点部署两个Vue.js SPA是否可行？子目录部署遇404问题求助

一、修正子目录 /SE 的 .htaccess 配置 #

你的子目录配置存在几个关键错误，以下是修正后的完整配置：

RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

# 设置基础路径为子目录
RewriteBase /SE

# 直接放行index.html
RewriteRule ^index\.html$ - [L]

# 非文件/非目录的请求，转发到子目录的index.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.html [L]

# HTTPS跳转修正（域名部分不要加路径）
RewriteCond %{HTTPS} off
RewriteCond %{HTTP:X-Forwarded-SSL} !on
RewriteCond %{HTTP_HOST} ^domain\.com$ [OR]
RewriteCond %{HTTP_HOST} ^www\.domain\.com$
RewriteRule ^(.*)$ https://www.domain.com/SE/$1 [R=301,L]

错误说明：

• 原配置中 RewriteRule ^SE/index\.html$ - [L] 错误：因为已经设置了 RewriteBase /SE，匹配路径时不需要再带SE前缀，直接匹配index.html即可。
• HTTPS跳转的HTTP_HOST条件错误：HTTP_HOST仅包含域名（如www.domain.com），不包含路径/SE，原配置中^domain\.com\SE$是完全错误的写法。
• 转发规则的目标路径修正：在RewriteBase /SE下，直接写index.html即可，不需要带/SE/前缀，避免路径重复。

二、配置子目录的Vue项目 #

除了服务器配置，Vue项目本身也需要调整，确保路由和资源路径正确：

1. 设置资源基础路径 #

• Vue CLI：在vue.config.js中添加：

module.exports = {
  publicPath: '/SE/'
}

• Vite：在vite.config.js中添加：

export default {
  base: '/SE/'
}

2. 配置Vue Router的基础路径 #

在路由配置文件中，设置路由的基础路径：

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory('/SE/'), // 绑定子目录路径
  routes: [
    // 你的业务路由规则
    {
      path: "/:catchAll(.*)",
      component: PageNotFound,
      name: "PageNotFound",
    }
  ]
})

三、验证主目录配置 #

主目录的.htaccess可保留原配置，Apache会优先使用子目录下的.htaccess规则处理对应路径请求，主目录规则仅作用于根路径，无需修改。

四、测试步骤 #

1. 重新打包子目录的Vue项目，将产物上传到服务器的/SE目录下。
2. 重载Apache服务器配置（或重启服务）。
3. 访问https://www.domain.com/SE及子路由（如https://www.domain.com/SE/about），验证是否正常加载，不会触发404。

内容的提问来源于stack exchange，提问作者Diego Martinez