vue3国际化

前言

像很多大型的网址，特别是跨国际等公司网页，访问来自世界各地用户，所以网页的国际化极其重要的需求，今天通过vue3项目实现国际化，语言的切换。

安装

引入方式

1、script引入

<script src="https://unpkg.com/vue@next"></script>

<script src="https://unpkg.com/vue-i18n@next"></script>

2、npm安装

npm install vue-i18n@next

3、yarn安装

yarn add vue-i18n@next

配置

1、首先再src目录下创建i18n目录、config目录，列如：

 

 在config目录存放需要国际化各个语言版本得配置文件，列如：en.js

 

  i18n目录下创建index.js，实例化并添加配置
 

mian.js 文件引入

使用 

1、标签使用

 <div>{{$t('message.userName')}}</div>

2、在标签属性使用 

 <header class="home-header wrap" :userName="$('message.userName')" /> 

 3、在js中使用

import i18n from '../../i18n/index';

const fieldName = i18n.global.t('api.message.userName');

 4、中英文切换

import { useI18n } from 'vue-i18n';
const { locale } = useI18n();
const changeLang = () => { locale.value = locale.value == 'zh' ? 'en' : 'zh'  }

参考地址和api：https://vue-i18n.intlify.dev/