Vue Router子目录部署：生产环境刷新页面出现404问题

你遇到的核心问题是SPA的路由特性导致的：通过Vue路由跳转时是前端处理URL，但刷新页面时浏览器会直接向服务器请求该URL，服务器找不到对应的文件就返回404。而之前的.htaccess配置错误，导致服务器返回了错误的内容（比如XHTML格式的页面），进而引发JS解析错误（unexpected token）。

正确的子目录.htaccess配置 #

将以下内容放在/my-app/目录下的.htaccess文件中：

<IfModule mod_rewrite.c>
  RewriteEngine On
  # 设定重写基准为子目录路径
  RewriteBase /my-app/
  # 排除实际存在的文件（如js、css、图片）和目录，避免静态资源被错误重定向
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  # 将所有非文件/目录的请求转发到index.html，由Vue路由处理
  RewriteRule ^ index.html [L]
</IfModule>

关键配置说明 #

• RewriteBase /my-app/：必须指定子目录作为重写基准，否则服务器会以根目录为基准处理重定向，导致路径错误。
• 两条RewriteCond规则：确保只有当请求的路径不是实际存在的文件或目录时才会重定向，这样静态资源（比如打包后的js、css文件）能正常被服务器返回。
• RewriteRule ^ index.html [L]：把符合条件的请求转发到子目录下的index.html，让Vue的前端路由接管URL解析。

配套的Vue路由配置 #

如果使用vue-router，需确保开启history模式，并设置与Vite一致的base路径：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  // 这里的base要和vite.config.js中的base完全一致
  history: createWebHistory('/my-app/'),
  routes: [
    // 你的路由规则
  ]
})

问题根源解释 #

之前出现的DOCTYPE被替换和unexpected token错误，是因为错误的.htaccess配置导致服务器没有正确返回index.html，反而返回了默认的XHTML格式错误页面（或者把静态JS文件的请求错误转发成了HTML内容）。浏览器尝试把HTML代码当成JS解析，自然会抛出语法错误。

验证步骤 #

1. 确认vite.config.js中的base: '/my-app/'配置正确，重新打包部署。
2. 替换子目录下的.htaccess为上述正确配置。
3. 重启Apache服务器（如果是共享主机，可能需要等待配置生效）。
4. 刷新页面测试，此时应该能正常加载路由页面。

内容的提问来源于stack exchange，提问作者Alexandru Nicolae