Vue3中使用i18n实现国际化(中英切换)

目录结构

─src
    ├─locales
      └─lang
          └─en.js  //英文语言包
          └─zh.js  //中文语言包
    ├─i18n.js     //i18n注册 

 1.安装vue-i18n

yarn add vue-i18n

或

npm install vue-i18n

2.创建i18n(i18n.js)

import {createI18n} from 'vue-i18n';
import zh from './lang/zh'
import en from './lang/en'

const messages = {
    zh, //中文语言包
    en   //英文语言包
}

const i18n = createI18n({
    legacy: false,//启用 composition Api 模式
    globalInjection: true,//注入全局状态
    locale: localStorage.getItem('lang') || 'zh', //从本地存储获取语言/默认使用中文
    messages //导入语言包
})

export default i18n;

3.创建中文语言包(zh.js)、英文语言包(en.js)

export default {
    "首页":'首页',
    "关于":'关于',
    "联系":"联系",
    "项目":"项目"
}

export