关于vue3:记录Vue3-中使用-vuei18n-多语言

一、踩坑记录
开始时候在网上收罗一大堆的相干帖子，都是通知你怎么用，却不说一些细节要点，
导致前面装置应用呈现了一系列的谬误浪费时间。特此记录一下。

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、在页面中应用

<div>{{$t('home.name') }}</div>

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;
}

三、留神要点
1、要装置的是 vue-i18n@next 而不是 vue-i18n；
2、多语言依据环境应该是检测地区 IP 段确定地区语言，然而图不便就采纳了浏览器语言标识。（临时没发现什么问题）
3、切换时通过测试，如果应用定义在 vue 原型上的 i18n 刷新后会经常性找不到，弄其它货色后再切换语言会失败，故此间接引入 i18n 会更不便。