VUE project internationalization processing

Foreword:

vue-i18nIn the development of large projects, we often encounter common business scenarios such as multiple project environments, internationalization (multi-language switching), theme switching, etc. This blog shares the specific steps to deal with internationalization in Vue development.

Web page renderings

1. Preparation

1. Development environment: webStrome, npm
2. Dependency package: vue-i18n

1.1 Installation steps
Three ways:

1. Script introduction

<script src="https://unpkg.com/vue/dist/vue.js"></script> 
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

2. npm installation

 npm install vue-i18n

npm install vue-i18n

3. Yarn installation

 yarn add vue-i18n

Yarn is installed in the same way as npm. It is installed into the local node folder through the package manager, and then package management is done through the package.json in the project. This blog post uses yarn installation.

1. Use yarn to install vue-i18n on the console.

2. After successful installation, the dependency version of the package.json file is as follows:

2. Project configuration

Create a new language folder in the project for internationalized language string processing. Among them ch.js, the folder is the definition of Chinese string constants; en.jsit is the definition of string constants in English state, and i18n.jsit is the relevant code for i18n multi-language configuration. index.jsIn order to support multi-language arrays, the current configuration is only in Chinese and English;

1. Prepare the configuration file as follows:

• ch.js

export default {
    
    
    message: {
    
    
        input_userNumber: "请输入账号",
        input_password: "请输入密码",
        input_phone: "请输入手机号",
        input_goods_name: '请输入商品名称',
        input_goods_desc: '请输入商品描述',
        input_goods_type: '请输入商品分类',
        input_comment_content:'请输入评论内容',
    },
}

• en.js

export default {
    
    
    message: {
    
    
        input_userNumber: "please input userNumber",
        input_password: "please input password",
        input_phone: "please input phone number",
        input_goods_name: 'please input goods name',
        input_goods_desc: 'please input goods desction',
        input_goods_type: 'please input goods type',
        input_comment_content: 'please input comment content',
    },
}

• i18n.js

import {
    
     createI18n } from 'vue-i18n' //引入vue-i18n组件
import messages from './index'

const i18n = createI18n({
    
    
    fallbackLocale: 'ch',
    globalInjection:true,
    legacy: false, // you must specify 'legacy: false' option
    locale: "ch",
    messages,
});

export default i18n;

• index.js

import en from './en'
import ch from './ch'

export default {
    
    
    en,
    ch,
}

2. After the configuration file is prepared, main.jsintroduce it globally into the project

core code

import i18n from './language/i18n'

const app = createApp(App);
app.use(i18n);

3. After the introduction is successful, reference it in the vue template

• 3.1 Referenced in the VUE template syntax. For example,
  if the input box is set on the project login page, the radio and button support internationalization. The sample code is as follows:

<template>
    <div>
        <div class="login-root">

            <input class="login-input" :placeholder="$t(`message.input_userNumber`)" id='number'/>
            <input :placeholder="$t(`message.input_password`)" class="login-input"  id="password"/>

            <span class="go-register" @click="goRegisterPage">{
    
    {
    
    $t(`message.go_register`)}}</span>


            <van-radio-group v-model="radio" direction="horizontal" class="checkbox-view">
                <van-radio name="1" @click="setCheck(1)">{
    
    {
    
    $t(`message.normal_user`)}}</van-radio>
                <van-radio name="2" @click="setCheck(2)">{
    
    {
    
    $t(`message.admin_user`)}}</van-radio>
            </van-radio-group>
            <span class="btn-login" @click="goMainPage">{
    
    {
    
    $t(`message.btn_login`)}}</span>
        </div>
    </div>
</template>

Note: $tThe string constants passed by references in the above code are defined in ch.jsthe following en.jsfiles.

4. By this.$i18n.localesetting the global language function logic code as follows

   switchLanguage: function () {
    
    
                var language = this.$i18n.locale
                if (language == "en") {
    
    
                    language = 'ch'
                } else {
    
    
                    language = 'en'
                }
                this.$i18n.locale = language;
            },

• After setting the language to en, the page effect is as follows
  
• Switch language to Chinese
  

So far, we have finished describing the introduction method and configuration of internationalization processing in the entire project and how to initialize and multi-language switching steps in the project. You can combine it with the explanations in this blog to write demo tests by yourself.

For the complete code download address of the project, please see Xie Dong’s github
https://github.com/xiedong11