Realizing studio management background with Vue (3): supporting multilingual internationalization (vue-i18n)

Time:2021-3-4

The first version of rxeditor is in English. Some friends seem to be not used to it. Later, because of laziness, they are not willing to modify the old code to add the Chinese version. This time, we solved this problem ahead of time. The best way to overcome laziness is to do it as soon as possible to avoid procrastination.

Originally, I planned to make a drop-down menu in the upper right corner of the interface to select the language. The workload of pull-down menu is a little heavy, and there is little need to switch interface language at any time. Finally, we decide to get the browser language environment and use the language settings of the browser. That is to say, using Chinese browser to open is the Chinese version, and using English browser to open is the English version. In this way, it has no sense of switching, small workload, and easy to use (well, by implication, my decision is the best).

Determine the implementation mode and start immediately:
1. To install the vue-i18n plug-in:

npm i vue-i18n -S

2. Create a new locale in the assets directory to store the dictionary related files, and put the language content in the. JSON file, index.js The file is used to reference vue-i18n and initialize some basic settings

Realizing studio management background with Vue (3): supporting multilingual internationalization (vue-i18n)

3. Write two versions of JSON file
en.json

{
  "toolbar": {
    "new" : "New",
    "open" : "Open",
    "save" : "Save",
    "download" : "Download",
    "about" : "About",
    "github" : "Github"
  }
}

zh.json

{
  "toolbar": {
    "New": "new",
    "Open": "open",
    "Save": "save",
    "Download": "download",
    "About": "about,",
    "github" : "Github"
  }
}

Note that double quotation marks are used in the JSON file, and single quotation marks are invalid.

3. Writing index.js

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

//Introducing vue-i18n
Vue.use(VueI18n)

//Importing language resource files
const locales = {
  zh: require('./zh.json'),
  en: require('./en.json'),
}
//Build a vuei18n instance, which will be exported later
const i18n = new VueI18n({
  locale: getDefaultLang(),
  messages: locales,
})

//Get the browser language environment and intercept the first two characters of Lang because the browser language return value may be: 
//zh-cn Chinese(PRC) 
//zh-tw Chinese(Taiwan Region) //zh-hk Chinese(Hong Kong SAR, PRC) 
//zh-sg Chinese(Singapore) 
//en-us English(United States) 
//en English
function getDefaultLang(){
  let lang = navigator.language || navigator.userLanguage
  lang = lang.substr(0, 2) return lang
}
//Make some basic configuration
export const setup = () => {
  let lang = getDefaultLang()

  Object.keys(locales).forEach(lang => {
    document.body.classList.remove(`lang-${lang}`)
  })
  document.body.classList.add(`lang-${lang}`)
  document.body.setAttribute('lang', lang)

  Vue.config.lang = lang
  i18n.locale = lang
}

4. Load Vue instance

import i18n from './assets/locales'
new Vue({
  el: '#app',
  i18n,
  render: h => h(App)
})

The running results are as follows

Realizing studio management background with Vue (3): supporting multilingual internationalization (vue-i18n)

In this work, a large number of references are givenhttps://segmentfault.com/a/119000001776275…I would like to thank the author for sharing such high-quality content. Maybe he can feel my gratitude:).

For the code of the whole project in this history node, please check it on my GitHubhttps://github.com/vularsoft/studio-ui
How to find the history node:

Realizing studio management background with Vue (3): supporting multilingual internationalization (vue-i18n)

Rxeditor is a visual editing tool for bootstrap code. This series records the development process of the software. If you have any questions, please leave a message on ithub.

This work adoptsCC agreementReprint must indicate the author and the link of this article