vue3 i18n切换语言 | 工作生活记录12

1.安装插件

cnpm install vue-i18n --save

以中英文为例

2. 新建 src/language/index.js

import { createI18n } from 'vue-i18n'; //引入vue-i18n组件
import zhCN from './zhCN';
import en from './en';

//注册i18n实例并引入语言文件
const i18n = createI18n({
    legacy: false,
    locale: localStorage.lang || 'zhCN', // 语言标识（缓存里面没有就用中文）
    fallbackLocale: 'zhCN', // 没有英文的时候默认中文语言
    messages: {
        zhCN,
        en
    }
});
export default i18n

3.英文语言 src/language/en.js

export default {
   en: 'English',
   zhCN: '中文简体',
   index: 'Index',
   lang: 'Language',
}

4.中文语言 src/language/zhCN.js

export default {
    en: 'English',
    zhCN: '中文简体',
    index: '首页',
    lang: '语言',
}

5.选择语言

html

<template>
    ……
    <a href="javascript:;" @click="changelang('zhCN')">中文简体</a>
    <a href="javascript:;" @click="changelang('en')">English</a>
    ……
</template>

javascript

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

// 选择语言
const changelang = (lang) => {
    i18n.locale.value = lang;
    localStorage.lang = lang;
}
</script>