无刷新 vue-i18n 方案

in vue.js前端默认分类 with 0 comment

因为工作关系,我们需要做一个中英文双语的网站。于是我最后选择了一个无刷新的国际化方案。
这个方案可以完成的功能有:

What is i18n

i18n 是 internationalization 的缩写,第一个字母 i 和最后一个字母 n 的中间有 18 个字母。
由于 internationalization 这个字实在是太长了,所以人们把它简写成 i18n 这样的形式。
参考

vue-i18n 安装和配置

在项目里使用 vue-i18n 非常简单。

安装

$ npm install --save-dev vue-i18n

使用

main.js 里引入和使用,并且配置语言标识。
配置语言标识时,为了能够在本地存储用户习惯的语言,我把语言标识存进了 localStorage.lang 里(后面会介绍),在这边直接读取 localStorage.lang ,如果没有这个字段,就把它设置成默认的 zh-CN
messages 里引用了我的中文和英文字典,由于使用了 eslint 对代码格式进行约束,而 es6 有不允许使用 require ,所以在这里临时关闭一行避免 eslint 报错。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import App from './App';
import router from './router';

Vue.use(VueI18n);

Vue.config.productionTip = false;

const i18n = new VueI18n({
  locale: localStorage.lang || 'zh-CN', // 语言标识
  // this.$i18n.locale // 通过切换locale的值来实现语言切换
  messages: {
    // eslint-disable-next-line
    'zh-CN': require('./common/language/zhn'), // 简体中文语言包
    // eslint-disable-next-line
    'en-US': require('./common/language/usa'), // 英文语言包
  },
});


/* eslint-disable no-new */
new Vue({
  el: '#app',
  i18n,
  router,
  components: { App },
  template: '<App/>',
});

字典

字典文件可以有很多个,里面的格式也可以按照你喜欢的格式来写。
我推荐的写法是,由于每一个都是变量,当出现多行文本的时候,采用类似数组的对象用法,例如:

/* demo */
// 简体中文
module.exports = {
  name: 'SSOC',
  nav: {
    service: '优势服务',
    partner: '合作伙伴',
    about: '关于我们',
    contact: '联系我们',
  },
  index: {
    slogan: '为您的产品提供安全的二次验证服务',
    ios_download: 'iOS下载',
    android_download: 'Android下载',
    scanqr_download: '扫码下载',
  },
  about: {
    txt: {
      0: '北京派科技国际软件开发团队成立于2016年10月,其前身是“好甜开发事务所”。发展初期为4人团队,主要办公地点在北京市大兴区黄村镇。',
      1: '经过两年多的发展,我团队为已经发展成为一个近20人的团队。核心开发、执行和运营人员遍布北京、香港、深圳、广州、天津、上海等地。 我们拥有自己的核心项目,不停的为更加多元化的互联网环境提供新的血液和基础支撑。',
      2: '我们欢迎更多有梦想的年轻人加入我们的团队。',
    },
  },
  contact: {
    txt: '联系方式',
    address_txt: '地址',
    address: {
      0: '北京市东城区朝阳门银河SOHO D座2层',
      1: '江苏省南京市玄武大道699-8 徐庄软件园一区',
      2: '13/F, Block 1, Flora Plaza, Fanling, N.T., Hong Kong',
    },
    tel_txt: '电话',
    tel: {
      0: '010 6920 6322',
      1: '00 853 6330 9876',
    },
    email_txt: '邮箱',
    email: {
      0: 's#ipietech.com (请将#替换为@)',
    },
  },
  footer: {
    company: '黑米说 好甜开发事务所',
  },
};

页面使用

<template>
    <div>
        {{ $t('index.slogan') }}        # 页面显示:为您的产品提供安全的二次验证服务
        {{ $t('contact.address.2') }}        # 页面显示:13/F, Block 1, Flora Plaza, Fanling, N.T., Hong Kong
    </div>
</template>

切换

新建一个组件,在组件里用任何你喜欢的方式切换语言的 method 里给 this.$i18n.locale 传对应的语言标志即可。
为了在本地存储用户习惯,同时给 localStorage.lang 传一样。在数据里,组件加载的时候

// data
{
  lang: localStorage.lang || 'en-US',        // 通过选择对应的语言传入相关的值
}
// method
localStorage.lang = this.lang;
this.$i18n.locale =  this.lang;    

最后把切换组件放入页面中,切换时页面文字变换,但不用刷新。

自动获取用户使用的操作系统的默认语言

封装一个小工具

/* eslint-disable */
export default function() {
  let language = '';
  if (navigator.appName === 'Netscape') {
    language = navigator.language;
  } else {
    language = navigator.browserLanguage;
  }
  // 获取到系统语言,对语言进行整理
  if (language === 'zh' || language === 'zh-CN') {
    return 'zh-CN';
  } else if (language === 'zh-TW' || language === 'zh-HK') {
    return 'zh-TD'; // 建议统一使用 zh-TD 作为繁体中文
  } else {
    // 其他语言统一使用美式英语
    return 'en-US';
  }
}

在组件渲染或系统渲染时,执行以下方法:

import GetSysLang from '@/common/getSysLang';
// 组件内
if (!localStorage.lang) {
  this.$i18n.locale = GetSysLang();
}

这样,一个完整的 i18n 方案就完成了。

Comments are closed.