前端国际化适配

前端国际化适配

创建项目后，安装依赖 vue-i18n, v8适配vue2,v9适配vue3

安装依赖

npm install vue-i18n@next

定义和组合语言包

langeurage/en.js，language/zh.js 中文和英文语言包字段名需一致

export default {
  message: {
    hello: 'hello world',
  },
  button: {
    ok: 'ok',
  },
}

组合语言包

import en from './en'
import zh from './zh'

const messages = {
  en,
  zh,
}

引入插件并创建i18n实例

在main.js中引入

import { createApp } from 'vue'
import App from './App.vue'
import { createI18n } from 'vue-i18n'
import messages from './language'

const i18n = createI18n({
  locale: 'zh', // set locale
  legacy: false, // set legacy to false to get Vue 3 behavior (Composition API + <script setup>)
  messages, // set locale messages
})

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

在组件中使用

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

按钮切换语言

<template>
  <div>
    <p>{{ $t('message.hello') }}</p>
    <button @click="changeLanguage('zh')">中文</button>
    <button @click="changeLanguage('en')">英文</button>
  </div>
</template>

<script setup>
import { useI18n } from 'vue-i18n'

const { locale } = useI18n()

const changeLanguage = (lang) => {
  locale.value = lang
}
</script>