vue国际化处理

什么是Vue国际化？

国际化就是你的页面要面向的群众使用的语言不只是中文，还有其他语言，在面对其他人群时要切换页面的语言

说起来很高大上，实际上还是没有那么高级的

文件的组织

一般是在大型项目中使用的，我们需要将相关文件放置在哪里？

建议是新开一个文件夹，以下面的方式进行组织
这里要使用的第三方包

npm install vue-i18n

安装的时候要注意兼容性的问题

看看你的项目是使用vue2.0还是3.0的，如果不兼容可能不能使用

vue-i18n插件

vue-i18n作为一个插件被使用，既然是一个插件，那么在vue中他就应该享用插件混入的机制

创建实例并且抛出

export default new VueI18n({
locale:window.localstorage.getItem('language')||'zh'},
message:{
zh:{},
en:{}
})

现在看一下locale和message选项是什么意思

locale用于选择message中的哪个语言，一般切换的时候可以使用localstorage去存储

message中设置了不同语言存储的数据，就像这样


一个网页的内容不可能只有这么点，所以会在这个对线里面进行设置多个对象（按照不同的功能进行分类）

最后是在模板语法中使用这些，使用前要先挂载

在模板语法中使用

调用形式$t('属性名')
在{{}}中使用：

{{$t('xxx')}}

在属性中使用

:属性名="$t('xxx')"

最后我们想切换语言使用window.localstorage.setItem()进行切换