Vue中使用vue-i18n

i18n

i18n（其来源是英文单词 internationalization的首末字符i和n，18为中间的字符数）是“国际化”的简称。

vue-i18n

Vue I18n 是 Vue.js 的国际化插件。它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中。

安装

html中引入

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

npm

npm install vue-i18n

yarn

yarn add vue-i18n

Vue中使用

导入与使用

在main.js中导入并使用

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

创建语言包

路径为src/common/lang/语言名(如:zh.json)，路径可变看自己需求

json文件中的内容就是相当于自己配置的可切换值的变量，如:

// em.json
{
    "test": "test"
}

// zh.json
{
    "test": "测试"
}

New i18n并注入到到Vue根实例

接下来简单的配置i18n，这里就演示中英双语啦

// 配置i18n
const i18n = new VueI18n({
  locale: 'zh-CN', // 语言标识
  messages: {
    'zh-CN': require('./common/lang/zh.json'), // 导入对应的语言包
    'en-US': require('./common/lang/em.json')
  }
})

别忘了注入到Vue

new Vue({
  el: '#app',
  i18n,
  router,
  components: { App },
  template: '<App/>'
})

在组件中使用

接下来我们到组件中测试

这里我们主要使用两种方法

使用v-text指令

这是页面上一些相对比较固定不变的展示信息，比如导航栏切换语言

使用插值语法

{{ $t('test') }} // test为json文件中配置的名字

这里还要说一下切换的方式

this.$i18n.locale 这就是上面提到的语言标识，通过改变locale来切换对应的语言

<template>
    <div>
        <span v-text="$t('test')"></span>
        <br>
        <br>
        <span>{{ $t('test') }}</span>
        <br>
        <br>
        <button @click="changeLang">切换</button>
    </div>
</template>

<script>
export default {
    name: 'WorkspaceJsonTestCom',

    data() {
        return {
            lang: 'zh-CN',
            test: '测试'
        };
    },
    methods: {
        changeLang() {
            if(this.lang === 'zh-CN') {
                this.lang = 'en-US'
                this.$i18n.locale = this.lang
            }else {
                this.lang = 'zh-CN'
                this.$i18n.locale = this.lang
            }
        }
    }
};
</script>

效果