前沿

平时我们在做Vue项目开发时，有些项目是要求需要国际化的，比如说我做的一些学校项目，因为学校里还有很多的留学生，所以项目至少要支持中英文，而Vue I18n是Vue.js 的国际化插件，它可以很轻松地将本地多语言功能集成到Vue.js 应用程序中

安装

// 目前这个版本是支持Vue3的// 如果想支持Vue2的话，可以考虑安装9.0以下的版本npm i vue-i18n@9 -S

入门使用

1、首先在项目根目录下创建lang目录，然后在lang目录下新建一个index.js文件，用来定义需要国际化的字段语言包

// 定义要国际化的字段// en代表文，cn代表中文export default {  en: {    message: {      hello: 'hello'    }  },  cn: {    message: {      hello: '您好'    }  }}

2、在main.js中引入国际化插件

import { createApp } from 'vue'import { createI18n } from 'vue-i18n'// 导入之前定义的语言包import messages from './lang/index.js'const i18n = createI18n({  locale: 'cn', // 设置默认语言为中文  messages:messages, // 添加国际化的语言包})const app = createApp({  // Vue的一些配置})// 引入国际化插件app.use(i18n)// 挂载app.mount('#app')

3、模板文件中使用

通过$t的方式来引入定义的语言包字段

<div id="app">  <p>{{ $t("message.hello") }}</p></div>

语言包里定义动态字段

const messages = {  en: {    message: {      hello: '{msg} world'    }  }}// 组件中使用时，第二个参数用来设置动态字段值<p>{{ $t('message.hello', { msg: 'hello' }) }}</p>// 最终显示<p>hello world</p>

4、语言切换

// 组件的实例下面有一个$i18n属性// 通过这个属性来变更语言this.$i18n.locale = 'en'

好了，这些功能基本上就满足了项目的国际化需求了

觉得效果不错的请帮忙加个关注点个赞，经常分享前端实用开发技巧