前端开发规范:不应在URL中带下划线或大写字母

Kaz
FrontendBest Practice
# Note

分析一个Nuxt前端项目案例,如果前端URL中包含:

  • 下划线 _(除非是动态路由用的 _slug.vue[[slug]].vue 这种特殊情况)
  • 大写字母(CamelCase 或 PascalCase)

!WARNING 那么在构建时(nuxt buildnuxt generate)会发出警告,提醒你 URL 中不应该出现下划线或大写字母

最佳实践

!TIP完全应该用横杠 - (kebab-case)分隔,且保持全部字母小写。

正确示例(推荐):

  • pages/user-profile.vue/user-profile
  • pages/blog/post-detail.vue/blog/post-detail
  • pages/admin/user-management/index.vue/admin/user-management

原因

  1. SEO 友好性(最重要):
    • Google 官方推荐:URL 中的单词用**连字符(hyphen -)**分隔,而不是下划线。
    • 下划线 _ 会被搜索引擎视为一个单词的一部分(例如 user_profile 被当成单个词 user_profile)。
    • 连字符 - 会被视为单词分隔符user-profile 被当成 userprofile 两个词),更有利于 SEO。
  2. 可读性和用户体验
    • user-profile-settingsuser_profile_settingsUserProfileSettings 更易读。
    • 大写字母在 URL 中容易引起混淆(有些服务器/代理/浏览器对大小写敏感,尤其是 Linux 服务器)。
  3. 一致性和兼容性
    • 几乎所有现代前端框架(Next.js、Nuxt、SvelteKit 等)和后端框架都推荐 kebab-case(小写 + 连字符)作为 URL 路径约定。
    • 避免在不同操作系统(Windows 大小写不敏感 vs Linux 大小写敏感)之间部署时出现奇怪的 404 或路由问题。

Copyright © 2025 KAZE. All rights reserved.