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

Vue项目中使用国际化i18n

程序员文章站 2022-03-04 14:37:39
Vue项目中使用国际化1.首先下载 npm i vue-i18n2.准备i18n.js文件用来配置国际化相关代码3.准备多种语言对应的js文件,例如这里用zh.js(中文) en.js(英文)4.最后导入到main.js,挂载到Vue对象中5.在Vue文件中使用国际化6.只需要通过切换本地缓存的local值就可以实现国际化的切换(效果展示)1.首先下载 npm i vue-i18n"vue-i18n": "^8.16.0",2.准备i18n.js文件用来配置国际化相关代码import Vue fr...

1.首先下载 npm i vue-i18n

"vue-i18n": "^8.16.0",

2.准备i18n.js文件用来配置国际化相关代码

import Vue from 'vue'
import VueI18n from 'vue-i18n'
// 这里特别强调一下,是自己封装的写入和获取浏览器本地缓存的方法
import { getStorageItem, setStorageItem } from '@/utils/StorageMessage'
import zh from './zh' // 中文语言包文件
import en from './en' // 阿文语言包文件
Vue.use(VueI18n)
if (!getStorageItem('language')) {
    setStorageItem('language', 'zh')
}
// 国际化
const i18n = new VueI18n({
    locale: getStorageItem('language') || 'zh', // 语言标识, 通过切换locale的值来实现语言切换,this.$i18n.locale
    messages: {
        zh: { lang: Object.assign({}, common, zh) }, // 中文语言包
        en: { lang: Object.assign({}, common, en) }, // 英文语言包
    },
})
export default i18n

3.准备多种语言对应的js文件,例如这里用zh.js(中文) en.js(英文)

  1. zh.js
export default {
    // 中文文案
    auditingText: {
        CONTENT_REVIEW: '内容审核',
        REPORT_REVIEW: '举报审核',
        WORK_ORDER_QUERY: '工单查询',
        QUICK_SEARCH: '快速搜查',
    }
}
  1. en.js
export default {
    // 英文文案
    auditingText: {
        CONTENT_REVIEW: 'Content review',
        REPORT_REVIEW: 'Report review',
        WORK_ORDER_QUERY: 'Work order query',
        QUICK_SEARCH: 'Quick search',
    }
}

4.最后导入到main.js,挂载到Vue对象中

// 将第一步的i18n.js文件导入到main.js中
import i18n from './lang/i18n'
// 挂载到vue对象
new Vue({
    router,
    store,
    i18n,
    render: h => h(App),
}).$mount('#app')

5.在Vue文件中使用国际化

1.标签形式

// 双花括号形式
<span>{{$t('lang.auditingText.NOT_REVIEWED')}}</span>

2.es6字符串拼接形式

// 字符串拼接形式
title: `${this.$t('lang.auditingText.ORDER_NUMBER')}`,

3.动态属性绑定的形式

// 动态属性形式
<span :tab="$t('lang.auditingText.CONTENT_REVIEW')"></span>

6.只需要通过切换本地缓存的local值就可以实现国际化的切换(效果展示)

Vue项目中使用国际化i18n

本文地址:https://blog.csdn.net/weixin_42458616/article/details/112564943

相关标签: vue js