vue项目国际化实现 vue-i18n使用详细教程

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

公司新项目使用了vue-cli与element-ui做了项目基础，考虑项目需求要做多语言实现，一番百度加案例，使用vue-i18n第三方实现，具体步骤如下：

前期项目准备工作略过，直接开始国际化配置...

1.安装vue-i18n：

npm i vue-i18n -S

2.项目配置vue-i18n：

在src目录下创建i18n文件夹，在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: localStorage.getItem('locale') || 'zh', // 语言标识
    // 添加多语言（每一个语言标示对应一个语言文件）
    messages: {
        zh,
        en,
    }
})
// 暴露i18n
export default i18n;

在各个语言配置文件中设置对应语言文案，并在index.js引入添加至messafes中：

const zh = {
    name: '姓名',
    info: {
        age: '男'
    }
}
export default zh;

最后在外层main.js引入i18n，并挂载至vue实例：

import Vue from 'vue';
import App from './App.vue';
/**
 * 引入i18n国际化
 */
import i18n from './i18n/';
Vue.config.productionTio = false; 
new Vue({
  el: '#app',
  i18n,
  render: h => h(App)
});

3.项目使用：

通过$t()方法引用文案：

<p>{{$t("name")}}</p>
<p>{{$t("info.age")}}</p>

修改语言：

this.$i18n.locale = 语言编码;

案例代码：

<template>
    <div id="test-ka">
        <h3>国际化翻译</h3>
        <p>{{$t("name")}}</p>
        <p>{{$t("info.age")}}</p>
        <p>
            <el-button @click.native="changeType('zh')">切换中文</el-button>
            <el-button @click.native="changeType('en')">切换英文</el-button>
        </p>
    </div>
</template>
<script>
import {mapMutations} from 'vuex';
export default {
    date() {
        return {}
    },
    methods:{
        changeType(type){
            // 此处做了语言选择记录
            localStorage.setItem('locale',type)
            // 修改显示语言
            this.$i18n.locale = type;
        }
    }
}
</script>

案例效果：

以上就是vue-i18n实现的vue项目多语言国际化，仅为基本操作，不足之处欢迎指正交流～

以上是 vue项目国际化实现 vue-i18n使用详细教程 的全部内容， 来源链接： utcz.com/z/376506.html

回到顶部