Vue i18n 国际化

安装

vue add i18n

默认生成

生成en.json：位于src/locales下

{
  "message": "hello i18n !!"
}

生成i18n.js：位于src下

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

function loadLocaleMessages () {
  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
  const messages = {}
  locales.keys().forEach(key => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
    if (matched && matched.length > 1) {
      const locale = matched[1]
      messages[locale] = locales(key)
    }
  })
  return messages
}

export default new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: loadLocaleMessages()
})

修改main.js：增加i18n。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import i18n from './i18n'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app')

修改.env：增加LOCALE和FALLBACK_LOCALE配置。

VUE_APP_I18N_LOCALE=en
VUE_APP_I18N_FALLBACK_LOCALE=en

package.json改动：scripts增加i18n:report。

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "i18n:report": "vue-cli-service i18n:report --src \"./src/**/*.?(js|vue)\" --locales \"./src/locales/**/*.json\""
}

package.json改动：dependencies增加vue-i18n。

"dependencies": {
  "vue-i18n": "^8.26.3"
}

package.json改动：devDependencies增加@intlify/vue-i18n-loader、vue-cli-plugin-i18n。

"devDependencies": {
  "@intlify/vue-i18n-loader": "^1.1.0",
  "vue-cli-plugin-i18n": "~2.3.1"
}

修改vue.config.js：增加pluginOptions。

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  pluginOptions: {
    i18n: {
      locale: 'en',
      fallbackLocale: 'en',
      localeDir: 'locales',
      enableInSFC: true,
      enableBridge: false
    }
  }
})

使用

$t

{
  "message": "hello i18n !!"
}

使用$t('message')

<p>{{ $t('message') }}</p>

变量替换

{
  "info": "I am {locale}"
}

使用$t('字段', {变量: 变量的值})，替换：

<p>{{ $t('info', {locale: '实际的值'}) }}</p>

切换语言

$i18n.locale='cn'
$i18n.locale='en'

示例

<template>
  <div>
    <p>{{ $t('message') }}</p>
    <div>
      <button @click="$i18n.locale='cn'">cn</button>
    </div>
    <div>
      <button @click="$i18n.locale='en'">en</button>
    </div>
  </div>
</template>

data中使用this.$t()不会动态切换语言。

v-text="$t()"可以动态切换语言。

<template>
  <div>
    <p>{{ username }} - {{$t("person.username")}}</p>
    <p>{{ address }} - {{$t("person.address")}}</p>
    <p v-text="username"></p>
    <p v-text="$t('person.username')"></p>
    <div>
      <button @click="$i18n.locale='cn'">cn</button>
    </div>
    <div>
      <button @click="$i18n.locale='en'">en</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloI18n',
  data() {
    return {
      username: this.$t("person.username"),
      address: this.$t("person.address")
    }
  }
}
</script>

参考

https://kazupon.github.io/vue-i18n/zh/introduction.html