Laravel与Vue（基于Inertia.js集成）的多语言切换实现方案

我最近在Laravel + Inertia.js + Vue的项目里搞定了多语言切换功能，虽然用了Inertia做前后端集成，但核心流程和常规的Laravel+Vue国际化一致。下面是我一步步实现的过程：

配置Vue I18n（基于选项式API） #

注：如果用组合式API的话配置方式不一样，而且没法直接通过this.$i18n.locale访问语言环境，得用对应的组合式API方法。

在app.js里初始化Inertia的时候集成Vue I18n：

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
        const i18n = createI18n({
            // 可以直接硬编码初始语言，或者通过props从后端获取用户当前语言
            // locale: props.initialPage.props.locale,
            locale: "de",
            fallbackLocale: "en", // 备用语言设置
            messages: loadLocaleMessages(), // 加载语言包（这里假设你已经实现了loadLocaleMessages方法）
        });
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(i18n)
            .mixin({ methods: { route } })
            .mount(el);
    },
});

Laravel端语言环境设置 #

Laravel这边我用中间件来处理语言环境的设置，优先从session获取用户选择的语言，如果没有就用配置文件里的默认值。

首先创建LanguageMiddleware类：

class LanguageMiddleware
{
    /**
     * 处理请求
     *
     * @param \Illuminate\Http\Request $request
     * @param \Closure(\Illuminate\Http\Request): (\Illuminate\Http\Response|\Illuminate\Http\RedirectResponse) $next
     * @return \Illuminate\Http\Response|\Illuminate\Http\RedirectResponse
     */
    public function handle(Request $request, Closure $next)
    {
        if(session()->has('locale')){
            app()->setLocale(session('locale'));
        } else {
            app()->setLocale(config('app.locale'));
        }
        return $next($request);
    }
}

然后要把这个中间件注册到Kernel.php的web中间件组里：

...
protected $middlewareGroups = [
    'web' => [
        ...
        \App\Http\Middleware\LanguageMiddleware::class,
    ],
];
...

定义语言切换路由 #

在web.php里加一个路由，用来更新session里的语言设置：

Route::put('/laravel-language/{key}', function ($key) {
    session()->put('locale', $key);
    return redirect()->back();
});

前端语言切换组件 #

在前端的布局组件（比如Authenticated.vue）里添加语言切换按钮：

<template>
    <!-- 语言切换按钮 -->
    <div v-if="$i18n.locale == 'en'">
        <a @click.prevent="switchLanguage('de')" href="#"> Deutsch </a>
    </div>
    <div v-if="$i18n.locale == 'de'">
        <a @click.prevent="switchLanguage('en')" href="#"> English </a>
    </div>
</template>

然后实现切换方法，同时更新Vue I18n的语言环境和调用Laravel的路由更新后端session：

<script>
export default {
    methods: {
        switchLanguage(key) {
            // 先更新前端语言环境
            this.$i18n.locale = key;
            // 调用Laravel路由更新后端session
            this.$inertia.put('/laravel-language/' + key);
        },
    },
}
</script>

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