在vue中使用vue-i18n按需加载语言包

更新日期: 2020-02-03 阅读: 3.4k 标签: 国际化

1.新建目录结构如下:

.
├── App.vue
├── assets
│   └── langs
│       ├── en
│       │    └── index.js
│       ├── zh
│       │    └── index.js
│       └── index.js
├── components
│   └── HelloWorld.vue
├── main.js
└── store.js 

2.assets/langs/index.js内容如下:

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import axios from 'axios'

Vue.use(VueI18n)

export const i18n = new VueI18n({
//   locale: 'zh', // 设置语言环境
  messages:{
    //   'zh':messages
  } // 设置语言环境信息
})

const loadedLanguages = [] // 我们的预装默认语言

function setI18nLanguage (lang) {
  i18n.locale = lang
  axios.defaults.headers.common['Accept-Language'] = lang
  document.querySelector('html').setAttribute('lang', lang)
  return lang
}

export function loadLanguageAsync (lang) {
  if (i18n.locale !== lang) {
    if (!loadedLanguages.includes(lang)) {
      return import(/* webpackChunkName: "lang-[request]" */ `@/assets/langs/${lang}/index.js`).then(msgs => {
        i18n.setLocaleMessage(lang, msgs.default)
        loadedLanguages.push(lang)
        return setI18nLanguage(lang)
      })
    }
    return Promise.resolve(setI18nLanguage(lang))
  }
  return Promise.resolve(lang)
}

3.在main.js中使用

//main.js

import Vue from 'vue'
import App from './App'
import store from './store'
import { i18n } from './assets/langs'
Vue.config.productionTip = false

window.app = new Vue({
  store,
  i18n,
  render: h => h(App)
}).$mount('#app')

4.loadLanguageAsync是实际用于更改语言的函数。比如在路由钩子中获取到当前语言环境加载对应语言包

beforeEnter(to, from, next){
      let lang = localStorage.getItem(lang)||'zh';
      lang=to.query.lang||lang;
      localStorage.setItem('lang',lang)
      loadLanguageAsync(lang).then(() => next());
    }

参考vueI18n地址如下:https://kazupon.github.io/

本文内容仅供个人学习/研究/参考使用,不构成任何决策建议或专业指导。分享/转载时请标明原文来源,同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦~感谢您的理解与支持!

链接: https://fly63.com/article/detial/8494

国际化(i18n) 各国语言缩写

internationalization (国际化)简称:i18n,因为在i和n之间还有18个字符,localization(本地化 ),简称L10n。 一般用语言_地区的形式表示一种语言,如:zh_CN表示简体中文

elementUi+Vue+i18n+Vue-cli 实现前端国际化

一般来讲,要翻译的文字比较多,所以最好为每门语言建立独立文件管理. 新建文件 lang/zh.js、 lang/en.js, 写入一些测试数据,下面去封装一个组件,用来切换语言,并将语言状态保存到cookie和Vuex中。

vue-i18n实现多语言切换效果

有些项目我们需要支持多种语言切换,满足国际化需求。 vue-i18n是一个vue插件,主要作用就是让项目支持国际化多语言,使用方便快捷,能很轻松的将我们的项目国际化。本文主要介绍使用vue-i18n实现切换中英文效果。

你不知道的CSS国际化

我遇到过一些人,他们根本不认为CSS与国际化有关,但如果你仔细想想,国际化不仅仅是把你网站上的内容翻译成多种语言,然后就收工了。该内容的呈现方式有各种细微的差别,这些细微的差别会影响到母语人士使用您的网站的体验。

Vue国际化实战指南:快速实现多语言网站

你的网站需要支持多语言用户吗?Vue.js让国际化变得非常简单。本文将手把手教你如何实现。利用vue-i18n库,你可以高效地为Vue应用添加Vue国际化功能。

React 应用国际化完整指南:从入门到实战

国际化(i18n)是指让应用程序能够适应不同语言和地区的过程。简单来说,就是让一个应用可以轻松切换成多种语言版本,同时还要处理好日期、时间、货币等格式的差异。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!