移除多语言站点默认英文URL中的/en/路径

Hey there! Let's figure out how to get rid of that /en/ prefix from your default English pages while keeping the /fr/ path for French content—super common issue with multilingual sites, so I’ve got you covered. Since you didn’t specify your exact tech stack, I’ll walk through the most common framework-specific fixes plus general approaches that should work.

Next.js (App or Pages Router) #

If you’re using Next.js’s built-in i18n support, the fix is straightforward in your next.config.js:

• Set defaultLocale: 'en' and disable localeDetection (to prevent auto-redirects that might re-add the prefix).
• This config tells Next.js to omit the /en/ prefix for your default language while keeping /fr/ for French:

// next.config.js
module.exports = {
  i18n: {
    locales: ['en', 'fr'],
    defaultLocale: 'en',
    localeDetection: false,
  },
}

• If you’ve been organizing pages under /app/[locale]/, move your English content to the root /app/ directory, and leave French content in /app/fr/.

Nuxt.js (Nuxt i18n Module) #

For Nuxt, the prefix_except_default strategy is exactly what you need—it adds prefixes only for non-default languages:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    locales: [
      { code: 'en', name: 'English' },
      { code: 'fr', name: 'Français' }
    ],
    defaultLocale: 'en',
    strategy: 'prefix_except_default', // 关键配置：默认语言不带前缀
    detectBrowserLanguage: false,
  }
})

Gatsby (gatsby-plugin-i18n) #

With Gatsby’s i18n plugin, toggle the prefixDefault option to false to remove the /en/ prefix:

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-i18n',
      options: {
        langKeyDefault: 'en',
        useLangKeyLayout: false,
        prefixDefault: false, // 禁用默认语言的URL前缀
      },
    },
  ],
}

If you’re using a custom setup (like Express, Nginx, or vanilla frontend routing), here’s how to handle it:

Server-Side Rewrites (Nginx/Express) #

• For Nginx, add a rewrite rule to map /en/* requests to the root path without the prefix:

location /en/ {
  rewrite ^/en/(.*)$ /$1 permanent;
}
# Ensure default requests serve English content
location / {
  try_files $uri $uri/ /index.html; # Adjust based on your app setup
}

• For Express, use a middleware to strip the /en/ prefix:

app.use((req, res, next) => {
  if (req.path.startsWith('/en/')) {
    req.url = req.url.replace('/en/', '/');
  }
  next();
});

Frontend Routing (React Router/Vue Router) #

Map English routes to root paths and French routes to /fr/ prefixed paths:

React Router Example

import { Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Routes>
      {/* English routes (no prefix) */}
      <Route path="/" element={<Home lang="en" />} />
      <Route path="/about" element={<About lang="en" />} />
      {/* French routes (with /fr/ prefix) */}
      <Route path="/fr" element={<Home lang="fr" />} />
      <Route path="/fr/about" element={<About lang="fr" />} />
    </Routes>
  );
}

• Disable Auto-Language Detection: If your site automatically detects the user’s browser language, make sure it doesn’t force a redirect to /en/ for English users.
• Update Internal Links: Double-check all links in your English content point to root paths (e.g., /about instead of /en/about).
• Build Config Adjustments: If you’re statically generating pages, ensure your build tool outputs English pages to the root directory instead of an /en/ subfolder.

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