前端Vue框架国际化配置

RumbleWx

于 2024-10-15 10:28:31 发布

阅读量452

点赞数 2

文章标签：前端 javascript vue.js

本文链接：https://blog.youkuaiyun.com/RumbleWx/article/details/142937438

版权

1、安装依赖

yarn add vue-i18n

2、配置语言包

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

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

3、在main.js中引用注册


// 国际化配置
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、使用

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