vue-i18n国际化

最近要做vue项目的国际化，增加中英文版切换，记录一下i18n的基本使用。

插件下载

npm i -S vue-i18n

创建文件夹

在src目录下创建如下文件

-- i18n
   |-- lang
       |-- en.js
       |-- zh-cn.js
   |-- index.js

原理: 在zh-cn.js里面把我们后台系统中的静态中文，以键值对的形式存下来。然后在en.js中用同样的键值对，把中文翻译成英文。

如：zh-cn.js

export default {
    home: {
      name: '小黄的商城后台',
    },
    tabs: {
      work: '作品',
      private: '私密',
      collect: '收藏',
      like: '喜欢',
    }
}

en.js

export default {
   export default {
    home: {
      name: "Xiaohuang's shopping mall backend",
    },
    tabs: {
      work: 'work',
      private: 'private',
      collect: 'collect',
      like: 'like',
    },
  };
}

然后在index.js中创建i18n的实例

index.js

import { createI18n } from 'vue-i18n'
// 引入语言包
import zhCn from './lang/zh-cn'
import en from './lang/en'

const i18n = createI18n({
     // 设置为 false，启用 composition api 模式
     legacy: false,
     locale: localStorage.getIten('localeLane') || 'zhCn',
     messages: {
         zhCn,
         en
     }
})

export default i18n

在 main.js 中引入 i18n 配置文件

import { createApp } from 'vue';
import App from './App.vue';
// 引入 i18n
import i18n from '@/i18n/index';

const app = createApp(App);
app.use(i18n); 
app.mount('#app');

调用切换

比如把切换按钮放在header栏上面

header.vue

<template>
    // 这是标题：小黄的商城后台的调用
    <div>{{ $t('home.name') }}</div>
    <div class="onChangeLang">{{ lang == 'zhCn' ? '切换英文版' : '切换中文版' }}</div>
</template>
<script>
import { useI18n } from 'vue-i18n'
const { locale: i18nLanguage } = useI18n()    

const lang = ref(localStorage.getItem('localeLane') || 'zhCn')
const onChangeLang = () => {
    lang.value = lang.value == 'zhCn' ? 'en' : 'zhCn'
    i18nLanguage.value = lang.value
    localStorage.setItem('localeLane', lang.value)
}
</script>

在上述步骤中，通过创建不同语言的文件来定义语言包，然后在 index.ts 中组合这些语言包，并创建 vue-i18n 的实例 i18n。在 main.js 中将 i18n 实例挂载到 Vue 应用上，使其在整个项目中生效。最后，在组件中使用 $t 方法根据当前设置的语言获取相应的翻译文本。如果需要进行语言切换，通过vue-i18n引入useI18n,获取到locale,通过修改locale.value进行语言切换。