vue2.7 + vue-i18n 环境搭建方案_vue-i18n-bridge-CSDN博客

本文链接：https://blog.csdn.net/qq_35459724/article/details/129166382

文章介绍了如何在Vue2项目中，结合typescript，使vue-i18n与compositionApi兼容。作者尝试了使用vue-i18n-bridge和直接封装i18n.t的方法，允许在js文件中直接调用翻译功能。一种方式是在main.js中初始化并导出t方法，另一种是创建一个新的i18n.js文件，直接导出绑定的t方法，供js文件使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

环境

vue@2.7.14
vue-i18n@8.28.2
typescript

注意

vue-i18n@8 支持vue2

vue-18n@9 支持vue3

使vue-i18n 兼容composition Api 的文档在 vue-i18n v9的文档中。

官网

根据官网 Migration from Vue 2 | Vue I18n (intlify.dev) 描述，可使用vue-i18n-bridge 使vue-18n v8 支持composition API写法。

但是没有找到如何在js中直接使用的方式。

因此尝试自己封装

由于 useI18n().t 只能在vue setup() 声明周期后，才能执行。因此我打算将 t 方法保存起来。

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import { createI18n, useI18n } from 'vue-i18n-bridge';
Vue.use(VueI18n, { bridge: true });
export const i18n = createI18n(
    {
        legacy: false,
        locale: navigator.language,
        fallbackLocale: 'zh-CN',
        messages,
    },
    VueI18n
);

// 未初始化就使用该方法，就报错。
let t = s => {
    throw new Error('t has not been initialized');
}
export function initI18n(){
    t = useI18n().t;
}
export { t };

然后只要在main.js中的 setup钩子中，执行initI18n 方法即可。这样其他文件直接访问 t 就可以使用了。

main.js

// main.js
//...
import { i18n, initI18n } from './i18n.js'
new Vue({
    i18n,
    setup(){
        initI18n();
    },
    //...
}).$mount('#app');

但是这种方式仍不优雅，也有局限性。也就是必须等待 initI18n 在vue生命周期中调用后才能正常使用。

下面有另一种方法：

不使用vue-i18n-bridge

根据 vue-i18n 在js文件中如何使用 - 简书 (jianshu.com) 的方式，重新封装i18n.t 即可在普通js文件中使用。

建立文件 i18n.js

// i18n.js
import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

export const i18n = new VueI81n({
    locale: navigator.language,
    fallbackLocale: 'zh-CN',
    messages,
})

export const t = i18n.t.bind(i18n); // 可使js文件访问

此文件export 的t 可以被js文件正常访问。

同时也可在vue 文件中正常运行。

// xxx.vue
<template>
    <div>{{ t("message.hello") }}</div>
<template>
<script>
import { t } from './i18n.js';
</script>

参考

vue-i18n 在js文件中如何使用 - 简书 (jianshu.com)