Vue

2023-12-18 11:22| 来源: 网络整理| 查看: 265

vue-i18n的安装、配置、vue中的使用、普通js中使用

[TOC]

安装

npm install vue-i18n --save

配置 1. 在src > main.js 中引入vue-i18n import VueI18n from 'vue-i18n' import i18n from './lang' //i18n的配置文件 // 因为我项目中用到了element-ui，需要将element-ui的国际化配上 Vue.use(Element, { size: Cookies.get('size') || 'small', // set element-ui default size i18n: (key, value) => i18n.t(key, value) }) // 将i18n挂载到Vue实例中 new Vue({ el: '#app', i18n, router, store, render: h => h(App) }) 2.在项目src文件夹中创建一个lang文件夹，放置语言包及index

// src > lang > index.js import Vue from 'vue' import VueI18n from 'vue-i18n' import Cookies from 'js-cookie' import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui 的语言包，没用到的可以不引入 import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui 的语言包，没用到的可以不引入 import enLocale from './en' // 项目中的语言包英文 import zhLocale from './zh' // 项目中的语言包中文 Vue.use(VueI18n) const messages = { en: { ...enLocale, ...elementEnLocale }, zh: { ...zhLocale, ...elementZhLocale } } // 获取当前语言环境：考虑到刷新操作，将语言类型存入缓存 export function getLanguage() { const chooseLanguage = Cookies.get('language') if (chooseLanguage) return chooseLanguage // if has not choose language const language = (navigator.language || navigator.browserLanguage).toLowerCase() const locales = Object.keys(messages) for (const locale of locales) { if (language.indexOf(locale) > -1) { return locale } } return 'en' } const i18n = new VueI18n({ locale: getLanguage(), messages }) export default i18n 3.在项目中切换语言(项目中用到了Vuex)

vue中的点击事件

handleSetLanguage(lang) { this.$i18n.locale = lang //也可以放在store中操作 this.$store.dispatch('app/setLanguage', lang) }

store中的操作

import { getLanguage } from '@/lang/index' const state = { language: getLanguage(), } const mutations = { SET_LANGUAGE: (state, language) => { state.language = language Cookies.set('language', language) } } const actions = { setLanguage({ commit }, language) { commit('SET_LANGUAGE', language) } } 使用i18n

到了这一步，就是i18n在项目中的使用了

{{ $t('login.title') }} import i18n from '@/lang' //如果是vue文件以外的地方使用，可用这种方式(比如路由) const loginTitle = i18n.t('login.title') //使用4 export default { name: 'Login', data() { const _this = this return { title: _this.$t('login.title') // 使用3 } }, methods:{ login(){ console.log(this.$t('login.title')) // 使用3 console.log(this.$t('login.hello', { name: 'Admin' })) //使用5，i18n中传参的方法 } } }

对应的，在src > lang > en.js / zh.js 语言包中，都需要加上参数

//zh.js中 //如果中英文的参数太多，也可以拆成多个文件，用import的方式引入export的文件 import basic from './basic/zh'; export default { login:{ title:'登录', hello:'您好 {name}' }, basic } //en.js中 import basic from './basic/en'; export default { login:{ title:'Login', hello:'hello {name}' }, basic }

ps：其实国际化用上了vue-i18n之后，并没有什么难点。最让人痛苦的就是项目里用到的文字太多太多了，需要一个个提取出来变成变量，真是令人头秃的工作。

【本文地址】

公司简介

联系我们