本文已参与「新人创作礼」活动，一起开启掘金创作之路

Vue I18n 是 Vue.js 的国际化插件，本文介绍它的简单使用

1、创建 vue3 项目

项目名为 vue-i18n-project

vue create vue-i18n-project

2、安装 vue-i18n

进入项目目录，执行安装命令

npm install vue-i18n@9

3、配置 vue-i18n

在 main.js 文件中配置 vue-i18n

main.js 文件内容

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  },
  cn: {
    message: {
      hello: '你好 世界'
    }
  }
}

const i18n = createI18n({
  // something vue-i18n options here ...
  locale: 'cn', // set locale
  fallbackLocale: 'cn', // set fallback locale
  messages, // set locale messages
})
import App from './App.vue'

createApp(App).use(i18n).mount('#app')

4、使用

App.vue 内容

<template>
  <div>
    <p>{{ $t("message.hello") }}</p>
    <br>
    <select  @change="change($event)">
      <option value ="cn">中文</option>
      <option value ="en">英文</option>
    </select>
  </div>
</template>

<script>
import { getCurrentInstance } from "vue";
export default {
  name: 'App',
  setup() {
   const { proxy } = getCurrentInstance();
    function change(v) {
      proxy.$i18n.locale = v.target.value
    }
    return {
      change
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

5、运行效果

至此完