Vue+i18n多语言动态设置（保姆级案例教程）

效果 ：

多语言

一、前言 ☀️

最近做项目要求前端显示i18n多语言国际化，做完后，发现网上很多教程都不够详细，也不全，吃了不少憋，对我这种新人极不友好，现在总结做了个简单多语言demo，希望大佬们指点一下！！！

总结遇到问题，稍安勿躁，关键把思路弄明白，剩下的都是小Ks。

二、技术介绍 ✏️

i18n：Vue.js 的国际化插件。它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中

i18n的官网地址安装 | Vue I18n (kazupon.github.io)

三、本案例是vant+vue2+localStorage,还搭配了moment.js工具类 ❤️❤️❤️

官网的例子：开始 | Vue I18n (kazupon.github.io)

而本案例是基于官网例子加以延伸，在messages中不仅可以自定义项目业务所需的文字语言包，还可以把vantUI组件内置的文字也进行多语言化，合并两个的语言包，并在vue组件动态修改，切换整体的语言包，从而实现多语言。

1、安装插件 ☕️☕️

npm install vue-i18n --save
npm i vant --save
npm i moment --save

2、创建i18n文件index.js

在src目录中创建i18n文件夹，在文件夹中创建index.js文件，用于全局配置多语言文件

(对Vant UI库 、业务自定义语言包 、moment时间处理类 进行了多语言的处理)

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import { Locale } from 'vant'
// 引入组件的语言包
import zhCN from 'vant/es/locale/lang/zh-CN'
import zhHK from 'vant/es/locale/lang/zh-HK'
import enUS from 'vant/es/locale/lang/en-US'
// 引入业务自定义的语言包
const localCN = require('./locale/zh') // 简体
const localHK = require('./locale/hk') // 繁體
const localUS = require('./locale/en') // English
// 在这里引入moment了，所以不在main.js引入了
import Moment from 'moment'
Vue.prototype.$moment = Moment
Vue.use(VueI18n);

// 语言包的类型合并
const messages = {
  'zh_CN': { ...zhCN, ...localCN },
  'zh_HK': { ...zhHK, ...localHK },
  'en_US': { ...enUS, ...localUS }
}

// localStorage获取当前语言类型(初次本地不存在'lang'字段存储，默认设置为'zh_CN')
const lang = localStorage.getItem('lang') || 'zh_CN'
console.log('初始语言类型', lang);

// 初次加载的语言默认设置
Locale.use(lang, messages[lang])
// 时间类moment语言默认设置
Moment.locale(lang)

export default new VueI18n({
  locale: lang, // set locale 
  messages: messages // set locale messages
});

3、创建业务自定义语言包

在i18n文件夹中创建locale文件夹，在里面设置多语言包，en.js / hk.js / cn.js

en.js

module.exports = {
    login: {
        'username': 'Please enter the user name',
        'password': 'Please enter your password',
        'Username': 'Username',
        'Password': 'Password'
    },
    form: {
        'submit': 'Submit'
    }
}

hk.js

module.exports = {
    login: {
        'username': '請輸入用戶名',
        'password': '請輸入密碼',
        'Username': '用戶名',
        'Password': '密碼'
    },
    form: {
        'submit': '提交'
    }
}

zh.js

module.exports = {
  login: {
    'username': '请输入用户名',
    'password': '请输入密码',
    'Username': '用户名',
    'Password': '密码'
  },
  form: {
    'submit': '提交'
  }
}

文件创建如图所示 ：

4、main.js引入i18n配置文件

// 【i18n多语言】
import i18n from './i18n/index'
new Vue({
  i18n,
  render: h => h(App),
}).$mount('#app')

5、Vue组件中动态切换语言

❤️❤️❤️❤️❤️❤️