vue-i18n国际化使用方法

安装

js 复制代码

npm i vue-i18n
// or
yarn add vue-i18n
// ...

直接上代码，注意代码中的注释

在src目录下创建一个i18n文件夹

js 复制代码

// /src/i18n/index.js
import { createI18n } from 'vue-i18n';
import zh from './langs/zh';// 中文语言包
import en from './langs/en';// 英文语言包

const messages = {
    zh, en
}

// 获取本地默认语言
export function getLocale() {
    let res = localStorage.getItem('lang');// 先获取本地缓存语言类型
    if (res) return res;// 如果缓存中有直接返回缓存，防止刷新页面后变回默认语言
    const webLang = navigator.language;// 获取浏览器默认语言
    if (webLang.includes('zh')) {
        res = 'zh';
    }
    if (webLang.includes('en')) {
        res = 'en';
    }
    return res || 'zh';
}

// 创建实例
const i18n = createI18n({
    legacy: false,
    locale: getLocale(),
    messages
})

export default i18n

语言包写法

js 复制代码

// /src/i18n/lang/zh.js  中文语言包
export default {
    message: {
        'Welcome': '欢迎',
        'Home': '首页'
    }
}

// /src/i18n/lang/en.js  英文语言包
export default {
    message: {
        'Welcome': 'Welcome',
        'Home': 'Home'
    }
}

// 注意两个语言包的键名要相同

另外可以写一个hook用来后面切换语言的时候用

js 复制代码

// /src/i18n/useLang.js
import { useI18n } from 'vue-i18n';
import { computed } from 'vue';

export default () => {

    // locale表示当前语言，可以直接修改他
    const { locale } = useI18n();
    // 当前语言的名称
    const langName = computed(() => {
        const map = {
            'zh': '简体中文',
            'en': 'English'
        }
        return map[locale.value];
    });

    // 切换语言的方法，传入需要切换的语言
    function langChange(lang) {
        locale.value = lang;// 直接修改locale，注意要加上.value
        localStorage.setItem('lang', lang);// 存入缓存
        window.location.reload();// 刷新页面，也可以不刷新，但是一般要修改ui框架的语言，就需要刷新
    }

    return { langChange, langName }
}

到这里准备工作就做完了，接下来看如何使用首先将/src/i18n/index.js中导出的i18n实例在main.js中引入

js 复制代码

import { createApp } from 'vue'
import App from './App.vue'
// ...
import i18n from '@/i18n' // 引入i18n
// ...

在template中使用

html 复制代码

<template>
    <div>
        <!--$t就是i18n提供的全局方法-->
        <h1>{{$t("message.Welcome")}}</h1>
        <p v-html="$t('message.Home')"><p>
    </div>
</template>

在js中使用

js 复制代码

<script setup>
import { useI18n } from "vue-i18n";
    
const { t } = useI18n();

const fn = () => {
    return t("message.Welcome");
}
</script>

如何切换语言上面我们封装了useLang，切换语言的时候就会用到它了

js 复制代码

<script setup>
import useLang from "@/i18n/useLang";

// 语言切换
const { langChange, langName } = useLang();
// 需要切换语言时直接调用langChange方法，传入需要需要切换的语言类型
// 注意传入值是/src/i18n/index.js文件中message对象的键值
// langName是当前语言的名称，用于展示当前是什么语言
</script>

至此i18n的基本使用方式就介绍完毕了

另外介绍一下如何让elementUI的语言跟随i18n的语言一起切换

在app.vue中给router-view套上一层组件el-config-provider，代码如下：

js 复制代码

<template>
    <el-config-provider :locale="lang">
        <router-view></router-view>
    </el-config-provider>
</template>

<script setup>
import { computed } from "vue";
import { ElConfigProvider } from "element-plus";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import en from "element-plus/es/locale/lang/en";

const lang = computed(() => {
    const map = {
        zh: zhCn,
        en: en,
    };
    return map[localStorage.getItem("lang") || "zh"];
});
</script>