您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生

Laravel中文（多语言）显示(laravel11+inertia的本地化实现)

发布时间：2024-11-10 22:33:09编辑：雪饮阅读（）

默认情况下，Laravel 应用程序框架不包含目录。如果您想自定义 Laravel 的语言文件，您可以通过 Artisan 命令发布它们。
 
Laravel 的本地化功能提供了一种便捷的方式来检索各种语言的字符串，使您可以轻松地在应用程序中支持多种语言。
Laravel 提供了两种管理翻译字符串的方法。首先，语言字符串可以存储在应用程序目录中的文件中。在此目录中，应用程序支持的每种语言可能都有子目录。这是 Laravel 用来管理内置 Laravel 功能（例如验证错误消息）的翻译字符串的方法：lang
/lang
    /en
        messages.php
    /es
        messages.php
那么经过检查，我们sail这种架构下，也是默认没有带这种目录的。
./vendor/bin/sail artisan lang:publish
不过上面这些都只是服务端多语言。我们界面上用的是inertia，如果从服务端来实现，未免有点麻烦。
安装i18n
./vendor/bin/sail npm install vue-i18n@next
这里可能需要挂梯子，不然不太容易安装下来。
接下来创建i18n的可导出对象文件如
Y:\root\example-app\resources\js\i18n.js
// src/i18n.js
import { createI18n } from 'vue-i18n';

// 引入你的语言文件
import en from './locales/en.json';
import zh from './locales/zh.json';

const messages = {
    en,
    zh,
};

const i18n = createI18n({
    locale: 'en', // 设置默认语言
    fallbackLocale: 'en', // 设置回退语言
    messages,
});

export default i18n;
然后在inertia架构下类vite的main.js中导入i18n如
Y:\root\example-app\resources\js\app.js
import i18n from './i18n';
然后setup部分如
setup({ el, App, props, plugin }) {
    return createApp({ render: () => h(App, props) })
        .use(plugin)
        .use(ZiggyVue)
        .use(ElementPlus)
        .use(i18n)
        .mount(el);
},
接下来我们要创建默认的英文语言文件如
Y:\root\example-app\resources\js\locales\en.json
{
    "English": "English",
    "Chinese": "Chinese",
    "Dashboard": "Dashboard",
    "finish user task": "finish user task",
    "unfinished user task": "unfinished user task",
    "Project List": "Project List",
    "User Task List": "User Task List"
}
同路径下创建中文语言文件zh.json如：
{
    "English": "英文",
    "Chinese": "中文",
    "Dashboard": "仪表板",
    "finish user task": "已完成用户任务",
    "unfinished user task": "未完成用户任务",
    "Project List": "项目列表",
    "User Task List": "用户任务列表"
}
那么接下来我们需要在之前的AuthenticatedLayout.vue组件中实现语言切换功能。
先导入i18n的语言切换对象locale和切换函数t
import { useI18n } from 'vue-i18n';

const { locale,t } = useI18n();
定义默认语言
const language = ref('en')
定义语言切换选项及语言切换选项的初始化
const languageOptions = ref([]);
const initLanguageOptions=()=>{
    languageOptions.value=[
        {
            value: 'en',
            label: t('English'),
        },
        {
            value: 'zh',
            label: t('Chinese'),
        },
    ];
}
initLanguageOptions();
这里看起来好像语言切换选项冗余了实现，其实因为语言切换后仅仅对于template中已经生效，对于该选项列表则需要重新初始化，所以这里单独写一个初始化函数。
同样，也需要监听去动态实现语言切换然后重新初始化。
watch(language,(newValue, oldValue)=>{
    console.log("language newValue",newValue);
    locale.value = newValue;
    initLanguageOptions();
});
那么接下来在之前的账户菜单所在同容器下再加一个语言切换的组件即可
<el-select
    v-model="language"
    placeholder="Select"
    size="small"
    style="width: 100px"
>
    <el-option
        v-for="item in languageOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
    />
</el-select>
那么这里以默认登录后的Dashboard.vue组件为例，原来的哪些文案对应切换如
{{ $t('Dashboard') }}
{{ $t('finish user task') }}
{{ $t('unfinished user task') }}
其它的都如法炮制即可。
我这里只部分进行多语言化，实现最终的效果如

本期词汇
Authenticated 已验证（authenticate 的过去分词）
internationalization 国际化
i18n国际化（internationalization）