Tramitación de internacionalización de proyectos VUE

Prefacio:

vue-i18nEn el desarrollo de grandes proyectos, a menudo nos encontramos con escenarios comerciales comunes, como múltiples entornos de proyectos, internacionalización (cambio de varios idiomas), cambio de tema, etc. Este blog comparte los pasos específicos para abordar la internacionalización en el desarrollo de Vue.

Representaciones de páginas web

1. Preparación

1. Entorno de desarrollo: webStrome, npm
2. Paquete de dependencia: vue-i18n

1.1 Pasos de instalación
Tres formas:

1. Introducción al guión

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

2. instalación npm

 npm install vue-i18n

instalación npm vue-i18n

3. Instalación del hilo

 yarn add vue-i18n

Yarn se instala de la misma manera que npm. Se instala en la carpeta del nodo local a través del administrador de paquetes y luego la administración de paquetes se realiza a través de package.json en el proyecto. Esta publicación de blog utiliza la instalación de Yarn.

1. Utilice hilo para instalar vue-i18n en la consola.

2. Después de una instalación exitosa, la versión de dependencia del archivo package.json es la siguiente:

2. Configuración del proyecto

Cree una nueva carpeta de idioma en el proyecto para el procesamiento de cadenas de idiomas internacionalizados. Entre ellos ch.js, la carpeta es la definición de constantes de cadena chinas, en.jses la definición de constantes de cadena en estado inglés y i18n.jses el código relevante para la configuración multilingüe de i18n. index.jsPara admitir matrices multilingües, la configuración actual es sólo en chino e inglés;

1. Prepare el archivo de configuración de la siguiente manera:

• 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. Una vez preparado el archivo de configuración, main.jsintrodúzcalo globalmente en el proyecto.

código central

import i18n from './language/i18n'

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

3. Una vez que la introducción sea exitosa, haga referencia a ella en la plantilla de vue.

• 3.1 Referenciado en la sintaxis de la plantilla VUE. Por ejemplo,
  si el cuadro de entrada está configurado en la página de inicio de sesión del proyecto, la radio y el botón admiten la internacionalización. El código de muestra es el siguiente:

<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>

$tNota: Las constantes de cadena pasadas por referencias en el código anterior se definen en ch.jslos siguientes en.jsarchivos.

4. this.$i18n.localeConfigurando el código lógico de la función de idioma global de la siguiente manera

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

• Después de configurar el idioma en en, el efecto de la página es el siguiente
  
• Cambiar idioma a chino
  

Hasta ahora, hemos terminado de describir el método de introducción y la configuración del procesamiento de internacionalización en todo el proyecto y cómo inicializar y cambiar los pasos en varios idiomas en el proyecto. Puede combinarlo con las explicaciones de este blog para escribir pruebas de demostración usted mismo.

Para obtener la dirección de descarga del código completo del proyecto, consulte el github de Xie Dong
https://github.com/xiedong11