1.开始踩坑记录的时候，在网上搜索了很多相关的帖子，都是告诉你怎么用的，但是没有提到一些细节，导致出现了一系列的错误浪费了后续安装和使用的时间。特此记录。cnpminstallvue-i18n//只适用于vue2版本cnpminstallvue-i18n@next//vue3安装此版本Vue3版本vue-i18n：传送门>>>2.使用scheme创建i18n文件夹，里面包含三个文档。1.index.js(主入口)import{createI18n}from'vue-i18n'importzhfrom'./zh'importenfrom'./en'consti18n=createI18n({//如果有本地语言标识,使用Local,如果没有则根据浏览器语言默认标识显示语言locale:localStorage.getItem('locale')||navigator.language.slice(0,2),messages:{zh,en}});exportdefaulti18n;2、zh.js（中文翻译）exportdefault{home:{name:"Home"}}3.en.js（英文翻译）exportdefault{home:{name:"Home"}}4.在main.js中引入importvueI18nfrom'./i18n'constapp=createApp(App);app.use(vueI18n)app.mount('#app')5.使用
{{$t('home.name)inthepage')}}
6.语言切换//为什么要引入文件的使用而不是直接解构i18n在Vue原型上的使用下面会说明。importi18nfrom"@/i18n/index";functionseleLanguage(index){constidx=['zh','en'][index]||navigator.language.slice(0,2);localStorage.setItem("语言环境",idx);i18n.global.locale=idx;}三、注意事项1、安装的是vue-i18n@next，不是vue-i18n；2.多语言根据环境Language由检测区域的IP段决定，但为了方便使用浏览器语言标识。（暂时没发现问题）3.切换时经过测试，如果使用vue原型上定义的i18n，经常会刷新后找不到，做完后切换语言失败其他的，直接引入i18n会更方便。