欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

每天记录一个知识点(vue中使用i18n)

程序员文章站 2022-05-15 23:44:21
...

不废话直接上代码(打卡:2021-01-06 )

效果预览

一、安装依赖

npm i vue-i18n -S

二、在src目录下创建i18n文件夹;

每天记录一个知识点(vue中使用i18n)

三、index.js 代码

import Vue from 'vue';
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
// 引入各个语言配置文件
import zh from './config/zh';
import en from './config/en';
// 创建vue-i18n实例i18n
const i18n = new VueI18n({
    // 设置默认语言
    locale: 'zh', // 语言标识
    // 添加多语言(每一个语言标示对应一个语言文件)
    messages: {
        zh,
        en,
    }
})
// 暴露i18n
export default i18n;

四、zh.js 代码

const zh = {
  admin: '后台管理系统',
  test: '你好',
  language: {
    zh: '中文',
    en: 'English',
  },
}
export default zh;

五、en.js 代码

const en = {
  admin: 'admin',
  test: 'hello',
  language: {
    zh: '中文',
    en: 'English',
  },
}
export default en;

六、main.js引入i18n,并挂载至vue实例

//引入i18n国际化
import i18n from './i18n/';

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

七、使用

1、在标签内作为正文内容

 <div>{{$t("admin")}}</div>

2、作为标签属性使用

<input :placeholder="$t('test')">

3、作为js中文字使用

console.log(this.$t("language.zh"))

八、改变语言

this.$i18n.locale = "zh");

demo

<template>
  <div id="test-ka">
    <h3>国际化翻译</h3>
     <p>{{$t("test")}}</p>
     <p>{{$t("admin")}}</p>
     <p>
        <el-button @click.native="changeType('zh')">切换中文</el-button>
        <el-button @click.native="changeType('en')">切换英文</el-button>
      </p>
    </div>
</template>
<script>

export default {
    date() {
        return {}
    },
    methods:{
        changeType(type){
            this.$i18n.locale = type;
        }
    }
}
</script>

笔记:
此文章说的是vue版的,不依赖element ui
如果项目运行失败,查看报错是不是少安装了依赖,按照提示安装即可

预览地址
element ui 版的i18n 官网