首次访问URL时自动添加默认Locale的实现问题

你的问题核心是：应用启动时访问根路径（不带Locale参数），i18n未初始化正确的Locale，导致页面无内容报错。需要实现自动跳转带默认Locale的URL，或自动初始化Locale并加载内容，无需手动操作。

问题分析 #

1. translation.js 中 guessDefaultLocale 方法存在变量名错误：userPreferredLocale.localeNoRegion 应该是 userPreferredLocale.localeRegion（因为getUserLocale返回的是localeRegion）。
2. 路由未处理根路径重定向，导致访问/时没有Locale参数，触发中间件错误跳转但未正确加载内容。
3. i18n.js 初始化时依赖localStorage.getItem('locale')，首次启动时该值不存在，导致Locale未正确设置。
4. 应用启动时未主动初始化默认Locale，需等待导航或切换操作才加载语言包。

解决方案 #

1. 修复translation.js的变量错误

修改guessDefaultLocale方法中的错误变量：

guessDefaultLocale(){
    const userPersistedLocale = Trans.getPersistedLocale()
    if(userPersistedLocale){
        return userPersistedLocale
    }

    const userPreferredLocale = Trans.getUserLocale()

    if(Trans.isLocaleSupported(userPreferredLocale.locale)){
        return userPreferredLocale.locale
    }
    // 修复：将localeNoRegion改为localeRegion
    if(Trans.isLocaleSupported(userPreferredLocale.localeRegion)){
        return userPreferredLocale.localeRegion
    }
    return Trans.defaultLocale
},

2. 配置路由根路径重定向

假设你的路由配置文件是router/index.js，添加根路径重定向到默认Locale的路径：

import { createRouter, createWebHistory } from 'vue-router'
import Trans from '@/translation'
import YourComponent from '@/views/YourComponent.vue'

const routes = [
    // 根路径重定向到默认Locale
    {
        path: '/',
        redirect: () => `/${Trans.guessDefaultLocale()}`
    },
    // 带Locale参数的主路由
    {
        path: '/:locale',
        component: YourComponent,
        // 应用Locale中间件
        beforeEnter: Trans.routeMiddleware,
        // 子路由示例
        children: [
            { path: '', name: 'Home', component: () => import('@/views/Home.vue') },
            // 其他子路由...
        ]
    },
    // 404路由重定向到默认Locale
    {
        path: '/:pathMatch(.*)*',
        redirect: () => `/${Trans.guessDefaultLocale()}`
    }
]

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes
})

export default router

3. 修改i18n.js初始化逻辑

使用Trans.guessDefaultLocale()设置初始Locale，而不是依赖可能不存在的localStorage值：

import { createI18n } from 'vue-i18n'
import en from '@/i18n/locales/en.json'
import Trans from '@/translation'

export default createI18n({
    // 初始Locale使用猜测的默认值
    locale: Trans.guessDefaultLocale(),
    fallbackLocale: import.meta.env.VITE_FALLBACK_LOCALE,
    legacy: false,
    globalInjection: true,
    messages: { en }
})

4. 在main.js中初始化Locale并加载语言包

确保应用启动时就加载默认Locale的语言包：

import { createApp } from 'vue/dist/vue.esm-bundler'
import { createPinia } from 'pinia'
import i18n from './i18n'
import App from './App.vue'
import router from './router'
import Trans from './translation'
import "bootstrap/dist/css/bootstrap.css"
import "bootstrap/dist/js/bootstrap.js"

const app = createApp(App)

// 启动时自动加载默认Locale的语言包
async function initApp() {
    const defaultLocale = Trans.guessDefaultLocale()
    await Trans.loadLocaleMessages(defaultLocale)
    Trans.currentLocale = defaultLocale
    document.querySelector("html").setAttribute("lang", defaultLocale)
    
    app.use(createPinia())
    app.use(i18n)
    app.use(router)
    app.mount('#app')
}

initApp()

5. 确保路由中间件正确处理无Locale的情况

修改translation.js中的routeMiddleware，如果没有Locale参数，直接重定向到默认Locale：

async routeMiddleware(to, from, next){
    const paramLocale = to.params.locale
    if(!paramLocale || !Trans.isLocaleSupported(paramLocale)){
        // 重定向到默认Locale的路径
        return next({ path: `/${Trans.guessDefaultLocale()}`, query: to.query })
    }

    await Trans.switchLanguage(paramLocale)
    return next()
},

效果验证 #

启动应用后，访问http://localhost:5173会自动跳转到http://localhost:5173/en（假设默认Locale是en），页面会正确加载对应语言的内容，无需手动点击导航或切换Locale。

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