使用vue-i18n进行项目国际化

vue-i18n方案文档

简介

安装

npm i -S vue-i18n

配置

cd project-path/src/***
mkdir i18n
cd i18n
touch index.js
mkdir lang
touch zh-CN.js en-US.js

1.zh-CN.js和en-US.js为具体语言包；

2.index.js负责实例化VueI18n ，加载应用语言包，export出i18n；

3.项目入口文件在实例化Vue时引入i18n：const app = new Vue({router, i18n, ...})。

语言切换

// ./i18n/index.js
// 按需加载(此实现需要lang与语言包js文件同名，如'zh-CN'、'us-EN'等)
export function loadLanguageAsync (lang) {
   
  if (i18n.locale !== lang) {
    if (!loadedLanguages.includes(lang)) {
      return import(`./lang/${lang}`).then(msgs => {
        i18n.setLocaleMessage(lang, msgs.default[lang]);
        i18n.setDateTimeFormat(lang, msgs.default[lang]);
        i18n.setNumberFormat(lang, msgs.default[lang]);
        loadedLanguages.push(lang);