VUE项目国际化处理

前言：

在大型项目开发中我们经常会遇到项目多环境，国际化（多语言切换），主题切换等常见业务场景，本篇博客分享在vue开发中借助vue-i18n处理国际化具体步骤。

Web页面效果图

Web页面效果图

1. 准备工作

1.开发环境：webStrome，npm
2.依赖包：vue-i18n

1.1 安装步骤
三种方式：

1、script引入

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

2、npm安装

 npm install vue-i18n

npm install vue-i18n

3、yarn安装

 yarn add vue-i18n

yarn 跟 npm安装机智一样，都是通过包管理器进行安装到本地node文件夹下，然后通过项目中的package.json做包管理，本博文采用yarn安装。

1.控制台使用yarn安装 vue-i18n

控制台使用yarn安装

2.安装成功后，package.json文件依赖版本如下：

image.png

2. 项目配置

image.png

在项目中新建language文件夹，用于国际化语言字符串处理。其中ch.js，文件夹为中文字符串常量定义；en.js为英文状态下字符串常量定义，i18n.js为i18n多语言配置相关代码，index.js为支持多语言数组，当前配置仅中英文两种；

1.准备配置文件内容如下

• 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.配置文件准备好后，在项目工程main.js中全局引入

核心代码

import i18n from './language/i18n'

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

3.引入成功后，在vue模板中引用

• 3.1在VUE template语法中引用
  如在项目登录页设置inputer输入框，radio跟按钮支持国际化示例代码如下

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

注：上述代码中通过$t引用的字符串常量，定义在ch.js跟en.js文件中

4.通过this.$i18n.locale设置全局语言功能逻辑代码如下

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

• 设置语言为en后，页面效果如下
  

  image.png

• 语言切换为中文

  
  image.png

至此整个项目中关于国际化处理的引入方式配置以及关于项目中如何初始化及多语言切换的步骤，我们已经讲述完毕，读着可结合本博客讲解，自行写demo测试。

项目完整代码下载地址详见 谢栋的github
https://github.com/xiedong11