前端Vue框架国际化配置

RumbleWx2024-10-15 15:12

1、安装依赖

javascript 复制代码

yarn add vue-i18n

2、配置语言包

javascript 复制代码

/locales/en.js
export default {
    GLOBAL: {
        Title: "Please connect the device",
    }
}

javascript 复制代码

/locales/zh.js
export default {
    GLOBAL: {
        Title: "请连接设备",
    }
}

3、在main.js中引用注册

javascript 复制代码

// 国际化配置
import VueI18n from "vue-i18n";
import en from "./locales/en.js";
import zh from "./locales/zh.js";

Vue.use(VueI18n);
const i18n = new VueI18n({
    locale: lang, // "zh"或"en"
    messages: {
        en: en,
        zh: zh,
    },
});

const vue = new Vue({
    components: { App },
    router,
    store,
    i18n,
    template: "<App/>",
}).$mount("#app");

4、使用

javascript 复制代码

<el-dialog :title="`🔗 ${$t('GLOBAL.Title')}`" class="dialog" :visible.sync="dialogVisible" width="450px" :close-on-click-modal="false" :close-on-press-escape="false">