关于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 会更不便。