【记录】Vue3|【记录】Vue3 中使用 vue-i18n 多语言。【记录】Vue3中使用vue-i18n多语

一、踩坑记录
开始时候在网上搜罗一大堆的相关帖子，都是告诉你怎么用，却不说一些细节要点，
导致后面安装使用出现了一系列的错误浪费时间。特此记录一下。

cnpm install vue-i18n //只适用于 vue2 的版本 cnpm install vue-i18n@next // vue3 安装这版

Vue3版 vue-i18n：传送门>>>
二、使用方案
一、创建 i18n 文件夹，文件中包含三个文件。
1、index.js（主入口）

import { createI18n } from 'vue-i18n' import zh from './zh' import en from './en'const i18n = createI18n({ // 如果本地有语言标识就采用本地，没有就根据浏览器语言默认标识显示语言 locale: localStorage.getItem('locale') || navigator.language.slice(0, 2), messages:{ zh, en } }); export default i18n;

2、zh.js（中文翻译）

export default { home:{ name:"首页" } }

3、en.js（英文翻译）

export default { home:{ name:"Home" } }

4、在 main.js 中引入

import vueI18n from './i18n'const app = createApp(App); app.use(vueI18n) app.mount('#app')

5、在页面中使用

{{ $t('home.name') }}

6、语言切换

//为什么要引入文件使用，而不是直接解构 Vue 原型上的 i18n 使用下面会说。 import i18n from "@/i18n/index"; function seleLanguage(index){ const idx = ['zh','en'][index] || 'zh'; localStorage.setItem("locale",idx); i18n.global.locale = idx; }

【【记录】Vue3|【记录】Vue3 中使用 vue-i18n 多语言。】三、注意要点
1、要安装的是 vue-i18n@next 而不是 vue-i18n；
2、多语言根据环境应该是检测地区 IP 段确定地区语言，但是图方便就采用了浏览器语言标识。（暂时没发现什么问题）
3、切换时经过测试，如果使用定义在 vue 原型上的 i18n 刷新后会经常性找不到，弄其它东西后再切换语言会失败，故此直接引入 i18n 会更方便。