Vue 项目部署在子目录下时hash vs history 的真实区别解析

1. Hash 模式 (默认)

特点：

URL 格式：http://example.com/subdir/#/home
# 之后的部分不会发送到服务器
完全依赖前端路由

子目录部署配置：

// vue.config.js
module.exports = {
  publicPath: '/subdir/',
  // 其他配置...
}

优点：

部署简单：无需服务器特殊配置 兼容性好：支持所有浏览器 子目录友好：天然支持部署在任何目录 无刷新问题：#前的内容由服务器处理，#后由前端处理

缺点：

URL 不够美观 SEO 支持有限（现代爬虫已能抓取 hash 路由）

2. History 模式

特点：

URL 格式：http://example.com/subdir/home
需要服务器配合重定向
模拟完整 URL 路径

子目录部署配置：

前端配置：

// vue.config.js
module.exports = {
  publicPath: '/subdir/',
  // 其他配置...
}

// router/index.js
const router = new VueRouter({
  mode: 'history',
  base: '/subdir/', // 重要：指定基础路径
  routes: [...]
})

服务器配置示例：

Nginx：

location /subdir/ {
  alias /path/to/your/app/;
  try_files $uri $uri/ /subdir/index.html;
  # 或者使用 rewrite
  # rewrite ^/subdir/(.*)$ /subdir/index.html last;
}

Apache：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /subdir/
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /subdir/index.html [L]
</IfModule>

优点：

URL 美观：无 # 符号 更好的 SEO：传统 URL 格式更受搜索引擎青睐 功能完整：支持完整的导航 API

缺点：

部署复杂：需要服务器配置 子目录配置繁琐：容易出错 服务器要求：需要支持 URL 重写

3. 核心区别对比

方面	Hash 模式	History 模式
URL 外观	有 `#` 符号	干净的传统 URL
服务器要求	无特殊要求	需要配置重定向
子目录支持	天然支持	需要明确配置 base
部署难度	简单	中等
SEO	一般	更好
兼容性	所有浏览器	需要现代浏览器
刷新行为	正常	可能 404

4. 常见问题与解决方案

Hash 模式在子目录的坑：

// 错误：忘记设置 publicPath
publicPath: '/',  // ❌ 打包后资源路径错误

// 正确
publicPath: process.env.NODE_ENV === 'production' 
  ? '/subdir/' 
  : '/',  // ✅

History 模式刷新 404：

原因：服务器找不到 /subdir/home 这个实际文件解决：配置服务器将所有子目录下的请求重写到 index.html

# Nginx 完整示例
server {
  listen 80;
  server_name example.com;

  location /subdir/ {
    root /var/www;
    index index.html;
    try_files $uri $uri/ /subdir/index.html;
  }
}

5. 选择建议

选择 Hash 模式当：

项目部署在未知环境（客户服务器）
没有服务器配置权限
子目录路径可能变化
快速部署为主要需求

选择 History 模式当：

需要优雅的 URL
有服务器配置权限
重视 SEO
项目是长期稳定的部署

6. 混合方案示例

// 根据环境自动选择模式
const router = new VueRouter({
  mode: process.env.NODE_ENV === 'production' && 
        window.location.hostname !== 'localhost'
    ? 'hash'  // 生产环境用 hash 避免配置问题
    : 'history',  // 开发环境用 history

  base: process.env.NODE_ENV === 'production'
    ? '/subdir/'
    : '/'
})