Ideas and practice of multi-language solution for Vue.js front-end project

Internationalization of the front end is a common requirement. However, there are not many directly available solutions in this regard on the Internet. I recently made a multi-language implementation based on Vue.js, and I would like to give a brief summary here.

1. What content usually needs to be processed

In general, in a web application, the content that needs to be switched between multiple languages ​​often includes the following aspects:

1. Content in the template, such as the text content in the <template> tag of Vue.js

2. Text content in JS code

3. The content of the copy in the picture

4. Page title

5. Copywriting in third-party components (for example, Vux components are used in my project)

6. Data content that needs to be displayed to the front end in the back end interface

7. Error message returned by the backend interface

2. Basic Idea

1. First, you need to determine how to obtain the language that should be displayed currently

I use the method of passing parameters such as ?lang=en or ?lang=zh-CN in the URL. The advantage of this is that you can specify which language to use through the link. However, relying solely on address bar parameters is also inconvenient. For example, when the page jumps, the address bar parameters may be lost. This will cause you to not know which language to display after the page jumps. The ideal way should be to have this parameter when entering a certain page (at this time you will know which language to use), and then you don't need to have this lang parameter when jumping to other pages, because you already know which language to use. Therefore, this parameter should be saved as soon as you enter the first page, for example, in localstorage or in the state of vuex.

This brings up the issue of priority in language judgment.

Because there may be a lang parameter in the address bar, there may also be related storage fields in localstorage (because the application was visited last time), you may also want to set a default fallback language, and so on. How should its priority be handled?

The correct priority should be:

First check if there is any parameter in the address bar;

Check if there is any in localstorage;

Then get the default language of the browser through navigator.language to see if it is the language supported by your application. If so, use it.

A fallback language (e.g., more common English) is used as a last resort.

Of course, you can simplify this to suit your needs.

2. Secondly, what tools are used to solve the problems of language conversion and packaging?

(1) Selection of i18n-related tools - Who will provide the multi-language conversion function (usually $t)?

Currently, most common internationalization methods are based on i18n, so there is no need for us to reinvent the wheel. But for the specific use of i18n, there are many different NPM modules. For example, vuex-i18n, vue-i18n, simplest-i18n, etc. Because most complex projects will use vuex, it is more convenient to choose vuex-i18n than vue-i18n for complex projects.

The simplest-i18n module, which is a very niche module, actually has its advantages. It supports the following:

In the template:

<span>$t('Real Name', 'Real Name')</span>

Or in JS:

this.$t('Real Name', 'Real Name')

That is, the languages ​​are written together, and each parameter of the $t function is a language, which is clear at a glance and relatively easy to read. For small projects, it is an option.

Its basic usage is as follows:

t.js file:

import i18n from 'simplest-i18n';
import getLang from '../../getLang';

const t = i18n({
  locale: getLang.lang, // current language locales: getLang.langs // supported language list });
export default t;

Then extend Vue.js in the application's entry file:

import t from './t';
Vue.$t = Vue.prototype.$t = t;

This will mount the $t method to the global Vue.js. It can also be accessed through this.$t in the Vue instance, which is very simple to use.

However, for large projects, writing all language packages in the code is not maintenance-friendly. Moreover, it cannot solve the multi-language problem of the Vux components I use.

So in the end, I chose vuex-i18n as the basis.

(2) Tools for organizing and processing language packages: How to organize and package language packages?

For this problem, I first need to solve the multilingualization problem of Vux third-party components.

First of all, in terms of the organization of language packs, it is more common to write them as JSON configuration files. However, I finally adopted the YAML format, which supports writing multi-language fields together. for example:

config.yml

confirm:
  confirm

Instead of splitting the multi-language of a field into several parts as shown below, for example:

confirm:

confirm: confirm

The advantage of this is that you can easily compare different language versions of a field, and when you want to modify or delete a field, you can do it in one place without switching. Moreover, the syntax of the YAML file is simpler and clearer, eliminating many troubles such as the need to use double quotes in JSON files and the prohibition of comments.

Secondly, in terms of language pack packaging, I found vux-loader. It can be combined with the existing webpack configuration, which not only completes the packaging of Vux component multi-language configuration, but also allows the use of <i18n> tags in custom Vue components. For example, in a custom component I can write:

<i18n>
confirm:
  confirm
<i18n>

When packaging, vux-loader will export the multilingual configuration information in the <i18n> tag to a YAML file we configured, and remove the <i18n> tag from our custom component.

So, how to deal with YAML files? You can use json-loader and yaml-loader. They can convert Yaml files into the json format we need, which is convenient for use in JS functions, like this:

const componentsLocales = require('json-loader!yaml-loader!../../locales/components.yml'); // This gets a language pack in json format

3. How to inform the backend interface what language to return data in?

Because many interfaces are involved and need to inform the backend which language to use, I chose to use the header method. In the axios interceptor, a header is added to the request: Accept-Language, and the value of this header is set to the language that the front-end should use (such as zh-CN or en, etc.). In this way, the problem can be solved in one place.

3. Some details in specific practice

1. Get the implementation of the getLang module in the language that should be used currently

import { getQueryObj } from '../utils/url';
import { setItem, getItem } from '../utils/storage';

const langs = ['zh-CN', 'en']; // Which languages ​​are supported const defaultLang = 'en'; // Default language, not thrown out yet function getLang() {
  let queries = getQueryObj();
  let storeLang = getItem('lang');
  let rawLang;
  let flag = false;

  if (queries && queries['lang']) {
    rawLang = queries['lang'];
    setItem('lang', rawLang);
  } else {
    rawLang = storeLang || navigator.language;
  }

  langs.map(item => {
    if (item === rawLang) {
      flag = true;
    }
  });
  return flag ? rawLang : defaultLang;
}

const lang = getLang(langs, defaultLang);

export default {
    lang, // Get the current language langs // List of supported languages ​​}

2. Configuration of multi-language packages for Vux components

You can find src/locales/all.yml from Vux's official github and copy it (src/locales/zh-CN.yml and src/locales/en.yml in the same directory are the Chinese and English parts respectively), and make slight modifications according to your needs.

Then import it into your application's entry file:

const vuxLocales = require('json-loader!yaml-loader!../../locales/all.yml');

3. Configuration of vux-loader

webpack.dev.conf.js:

resolve(vuxLoader.merge(devWebpackConfig, {
    plugins_dir: [
        'vux-ui',
        {
            name: 'i18n',
            vuxStaticReplace: false,
            staticReplace: false,
            extractToFiles: 'src/locales/components.yml',
            localeList: ['en','zh-CN']
        }
    ]
}))

webpack.prod.conf.js:

resolve(vuxLoader.merge(buildWebpackConfig, {
    plugins_dir: [
        'vux-ui',
        {
            name: 'i18n',
            vuxStaticReplace: false,
            staticReplace: false,
            extractToFiles: 'src/locales/components.yml',
            localeList: ['en','zh-CN']
        }
    ]
}))

The localeList: ['en','zh-CN'] specifies which languages ​​your application supports.

extractToFiles: 'src/locales/components.yml' specifies the YAML file to which the language pack information in the <i18n> tags used in your custom components should be exported. That is to say, the language pack information in the <i18n> tag used in each custom component will be extracted centrally into this file by vux-loader.

Then import this language pack file into the application's entry file:

const componentsLocales = require('json-loader!yaml-loader!../../locales/components.yml');

4. Multilingualization of text inside and outside of custom components

(1) For the multilingual information of the text inside a custom component, just write it in the <i18n> tag of the component. At the same time, in order to avoid naming conflicts between multilingual fields in different custom components, add a component name-style prefix to the name of each field.

(2) For page titles, some error messages and other text, they appear outside the component and are therefore not suitable to be written in the component's <i18n> tag. Therefore, we create a separate global.yml file to store these global multilingual information. These contents can be written directly in global.yml, and in order to avoid conflicts with other language pack fields, we add the global- prefix in front of each field.

Then import this language pack file into the application's entry file:

const componentsLocales = require('json-loader!yaml-loader!../../locales/global.yml');

5. Implementation of vuex-i18n

In the src/store/index.js file:

import VuexI18n from 'vuex-i18n';

Add export default new Vuex.Store:

    i18n: VuexI18n.store

In the application's entry file:

import VuexI18n from 'vuex-i18n';
import getLang from '../../getLang';

Vue.use(VuexI18n.plugin, store);

const vuxLocales = require('json-loader!yaml-loader!../../locales/all.yml');
const componentsLocales = require('json-loader!yaml-loader!../../locales/components.yml');

const finalLocales = {
  'en': Object.assign(vuxLocales['en'], componentsLocales['en']),
  'zh-CN': Object.assign(vuxLocales['zh-CN'], componentsLocales['zh-CN'])
}

for (let i in finalLocales) {
  Vue.i18n.add(i, finalLocales[i])
}

Vue.i18n.set(globalVars.lang);

6. Multilingualization of images

There are two main ways to make the text information in the picture multilingual: one is to display different pictures according to different languages; the other is to separate the text from the picture background as much as possible, and use the method of text layer plus background picture layer, so that the text layer can be used as ordinary text to achieve multilingualization. They are all relatively simple and will not be elaborated on.

7. How to update the content of the current page after switching the current language through the button on the current page?

If your application does not need to switch language versions within the page, you can directly pass different lang parameters in the URL and this problem does not occur.

The first method: refresh the page

<button @click="changeLang('zh-CN')">Chinese</button>
<button @click="changeLang('en')">English</button>

changeLang(lang){
    location.href = this.$utils.url.replaceParam(this.$router.history.current.path, 'lang', lang);
},

The second method: watch the changes of the lang field in the current page data, and partially refresh some related components through v-if:

data(){
    return {
        lang: this.$i18n.locale()
    }
}

changeLang(lang){
    this.$i18n.set(lang);
    this.lang = this.$i18n.locale();
},

watch:
    lang(newVal, oldVal) {
        if(newVal === oldVal) {
            return;
        }

        //Here, change a flag and combine it with v-if to trigger the re-rendering of a local component}
}

The third way: Combine vuex to dispatch the global language status, update it when the status changes, or simply rewrite the implementation of vuex-i18n yourself. This method is relatively complicated.

Choose according to your business needs.

8. Escape of special characters in YAML

For some YAML key values ​​containing special characters, such as [, ], etc., they need to be escaped. The way to convert is to add single quotes to the key value.

If your language pack information contains single quotes, you must escape them using two consecutive single quotes. For example:

str: 'labor' 's day'

Summarize

This concludes this article about the ideas and practices of Vue.js front-end multi-language solutions. For more relevant Vue.js front-end multi-language content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!