美文网首页
vue 使用vue-i18n多语言

vue 使用vue-i18n多语言

作者: 空气KQ | 来源:发表于2019-08-25 18:33 被阅读0次

cnd使用

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>


</head>
<body>
<div id="app">
    <p>{{ $t("message.hello") }}</p>
</div>
<script>
    // 准备翻译的语言环境信息
    const messages = {
        en: {
            message: {
                hello: 'hello'
            }
        },
        cn: {
            message: {
                hello: '你好'
            }
        }
    }

    // 通过选项创建 VueI18n 实例
    const i18n = new VueI18n({
        locale: 'cn', // 设置地区
        messages, // 设置地区信息
    })


    // 通过 `i18n` 选项创建 Vue 实例
    new Vue({ i18n }).$mount('#app')

    // 现在应用程序已经准备好了!
</script>
</body>
</html>
image.png

NPM安装

npm install vue-i18n

语言格式化

const messages = {
  en: {
    message: {
      hello: '{msg} world'//msg相当于变量
    }
  }
}

<p>{{ $t('message.hello', { msg: 'hello' }) }}</p>

msg相当于变量赋值

列表格式

const messages = {
  en: {
    message: {
      hello: '{0} world'
    }
  }
}
<p>{{ $t('message.hello', ['hello']) }}</p>
<p>{{ $t('message.hello', {'0': 'hello'}) }}</p>

复数

const messages = {
  en: {
    car: 'car | cars',
    apple: 'no apples | one apple | {count} apples'
  }
}

<p>{{ $tc('car', 1) }}</p>
<p>{{ $tc('car', 2) }}</p>

<p>{{ $tc('apple', 0) }}</p>
<p>{{ $tc('apple', 1) }}</p>
<p>{{ $tc('apple', 10, { count: 10 }) }}</p>

一般使用

import Vue from 'vue'
import App from './App.vue'
import Vue18n from 'vue-i18n'

//使用引入
Vue.use(Vue18n);

//定义标识符
const i18n = new Vue18n({
    locale: 'zh-CN',    // 语言标识
    //this.$i18n.locale // 通过切换locale的值来实现语言切换
    messages: {
        'zh-CN': require('./common/lang/cn'),   // 中文语言包
        'en-US': require('./common/lang/en')    // 英文语言包
    }
})

Vue.config.productionTip = false

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

image.png image.png image.png

其他使用查看文档
https://kazupon.github.io/vue-i18n/zh/introduction.html

相关文章

网友评论

      本文标题:vue 使用vue-i18n多语言

      本文链接:https://www.haomeiwen.com/subject/dmrkectx.html