在vue3中使用vue-i18n（js版）嘎嘎好用

切换语言（按钮） 展示，i18n是Internationalization的缩写，在前端页面开发中我们难免会遇到页面中英文双语切换的情况。

安装

npm i vue-i18n@next

配置

// src/utils/i18n.js
import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  locale: 'ch', // set locale
  messages: {
    ch: {
      message: {
        hello: '你好',
      },
    },
    en: {
      message: {
        hello: 'hello',
      },
    },
  },
})

export default i18n

// main.js
import { createApp } from 'vue' 
import App from './App.vue' 
import i18n from './i18n' 

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

使用

切换语言（select）

  <select v-model="$i18n.locale">
      <option v-for="locale in $i18n.availableLocales" :key="`locale-${locale}`" :value="locale">
        {{ locale }}
      </option>
    </select>

切换语言（按钮）

    <div @click="getLang()" class="lang">{{locale=='ch'?'English':'中文'}}</div>

在js文件中使用（改变语言）

import { useI18n } from 'vue-i18n';

const { locale } = useI18n();

const { t } = useI18n();     //解析出t方法
console.log(t('message.hello'));  //可在js中打印,vue2中可用this

// 语言切换
const getLang = () => {
  console.log(locale.value);
  locale.value = locale.value == 'ch' ? 'en' : 'ch';
};

页面渲染

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

展示

<template>
   <div>
        你好
   </div>
</template>