前端利用 i18n 实现多语言切换

前端实现多语言切换：实现前端页面的资源国际化一、vue 中引用 vue-i18n 实现国际化安装 vue-i18nnpm install vue-i18n新建语言文件包： cn.js / en.js …cn.jsexport default {lang: 'cn',hello: '你好',}en.jsexport default {lang: 'en',hello: 'hello',}新建一个

躺在家里不干活

5154人浏览 · 2020-11-17 17:01:01

躺在家里不干活 · 2020-11-17 17:01:01 发布

前端实现多语言切换：实现前端页面的资源国际化

一、vue 中引用 vue-i18n 实现国际化

安装 vue-i18n

npm install vue-i18n

新建语言文件包： cn.js / en.js …

cn.js

export default {
	lang: 'cn',
	hello: '你好',
}

en.js

export default {
	lang: 'en',
	hello: 'hello',
}

新建一个 i18n.js 中引入 vue-i18n （前提是要先引入 vue）

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(vueI18n)

/*
设置一下网站支持的语言种类
*/
const webLanguage = ['cn', 'en', 'ko'];

let i18n = new VueI18n({
  locale: 'en', // 语言标识
  //this.$i18n.locale // 通过切换locale的值来实现语言切换
  messages: {
  	// 引入语言包，路径根据实际情况修改
    'cn': require('static/lang/cn'),
    'en': require('static/lang/en'),
    'ko': require('static/lang/ko')
  }
})

// 为方便代码阅读将cookie操作(getCookie)和获取浏览器语言(getNavLanguage)方法放在文章最后
i18n.setUserLanguage = function(lang) {
  getCookie("userLanguage", lang, {
    expires: 30,
    path: '/'
  });
  i18n.locale = lang;
}

let cookieLang = getCookie('userLanguage') ? getCookie('userLanguage') : getNavLanguage();
i18n.setUserLanguage(cookieLang);

export default i18n

在 main.js 中引入上面创建的 i18n.js.

import i18n from 'static/js/i18n'  //路径设置为你所创建的i18n.js的路径

将 i18n 挂载在 vue 根实例上：

new Vue({
  el: '#app',
  i18n,
  components: { App },
  template: '<App/>'
})

使用方法：

template 中用法：

<h4>{{$t('home')}}</h4>
<input type="number" :placeholder="$t('hello')">

js 中的用法

// 使用语言
alert(this.$t('hello'))
//切换语言，lang参数可为：cn/en/ko等
this.$i18n.setUserLanguage(lang);

二、HTML页面调用 vue-i18n

直接引入 vue-i18n.js

<div id="app">
  <!-- 应用 -->
  <p>{{ $t("hello") }}</p>
</div>

<!--vue和i18n依赖包-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
<!--语言包-->
<script src="./cn.js"></script>
<script src="./en.js"></script>
<script src="./ko.js"></script>
<!--i18n 配置文件-->
<script src="./i18n.js"></script>
<!--挂载到 app 上-->
<script src="./index.js"></script>

新建语言包文件 cn.js / en.js

var cnLang = {
	lang: '中文',
	hello: '你好',
}

新建 i18n.js

/*
设置一下网站支持的语言种类
  */
var webLanguage = ['cn', 'en', 'ko'];

var i18n = new VueI18n({
  locale: 'en', // 语言标识
  //this.$i18n.locale // 通过切换locale的值来实现语言切换
  messages: {
  	// 引入语言包，变量cnLang为语言包内定义的cnLang，必须一致
    'cn': cnLang,
    'en': enLang,
    'ko': koLang,
  }
})

i18n.setUserLanguage = function(lang) {
  getCookie("userLanguage", lang, {
    expires: 30,
    path: '/'
  });
  i18n.locale = lang;
}
// 初始化语言
var cookieLang = getCookie('userLanguage') ? getCookie('userLanguage') : getNavLanguage();
i18n.setUserLanguage(cookieLang);

新建index.js

// 通过 `i18n` 选项创建 Vue 实例
new Vue({ i18n }).$mount('#app')

使用方法

// 使用语言
alert(this.$t('hello'))

//切换语言，lang参数可为：cn/en/ko等
this.$i18n.setUserLanguage(lang);

三、静态页面调用 i18n

源码下载：https://github.com/FloweringVivian/jquery.i18n.properties

需要依赖 $.i18n.properties 插件，实现步骤如下：

引包：（这三个文件引包先后顺序不能换）

<script src="js/jquery.min.js"></script>
<script src="js/jquery.i18n.properties.js"></script>
<script src="js/language.js"></script>

head 部分 meta 设置 id , content

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta id="i18n_pagename" content="message">
</head>
<body>

</body>
</html>

body 部分

<!--目前html中统计结果有6种类型，html, text, title, alt, placeholder, value, 以及这6种的组合，请按照以下格式对标签进行修改-->

<!--html-->
<div class="i18n" data-properties="htmlmsg" data-ptype="html"></div>

<!--text-->
<div class="i18n" data-properties="hellomsg1" data-ptype="text"></div>

<!--title-->
<div class="i18n" title="" data-properties="commonmsg1" data-ptype="title">请用鼠标划过我看title效果</div>

<!--alt-->
<div> <img class="i18n" src="images/alt1.png" alt="" data-properties="img" data-ptype="alt"> </div>

<!--placeholder-->
<div> <input class="i18n" type="text" placeholder="" data-properties="searchPlaceholder" data-ptype="placeholder"> </div>

<!--value-->
<div> <input class="i18n" type="button" value="" data-properties="btn" data-ptype="value"> </div>

<!--text+title-->
<div class="i18n" title="" data-properties="hellomsg2/hellomsg2" data-ptype="text/title"></div>

<!--value+title-->
<div> <input class="i18n" type="button" value="" data-properties="btn/btntip" data-ptype="value/title"> </div>

<!--其他组合情况同理-->

注意：

html和text的区别主要在于：如果中文中间含有换行空格大于符号小于符号等，需要将data-ptype设置为html，其他纯文本情况均设置为text。
data-properties 里的值需要取properties文件中的key值，多个值用"/"隔开
data-ptype 里的值是为了区分类型，多个值用"/"隔开，
并且需要保证 “data-properties” 和 "data-ptype "用 "/" 隔开的顺序相同，即一一对应。
所有需要做多语言处理的标签都需要加上class="i18n"。
上述用法如果无法满足个别特殊情况，可以针对特殊情况单独处理。

对于 js 处理

直接用 $.i18n.prop 方法取 properties 文件中的 key 值即可，如下所示：

alert($.i18n.prop('welcome'));

文件资源放在 i18n 文件目录下，资源内容为键值对的形式，如下图：

在这里插入图片描述

附加方法

/**
 * cookie操作
 */
var getCookie = function(name, value, options) {
  if (typeof value != 'undefined') { // name and value given, set cookie
    options = options || {};
    if (value === null) {
      value = '';
      options.expires = -1;
    }
    var expires = '';
    if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
      var date;
      if (typeof options.expires == 'number') {
        date = new Date();
        date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
      } else {
        date = options.expires;
      }
      expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
    }
    var path = options.path ? '; path=' + options.path : '';
    var domain = options.domain ? '; domain=' + options.domain : '';
    var s = [cookie, expires, path, domain, secure].join('');
    var secure = options.secure ? '; secure' : '';
    var c = [name, '=', encodeURIComponent(value)].join('');
    var cookie = [c, expires, path, domain, secure].join('')
    document.cookie = cookie;
  } else { // only name given, get cookie
    var cookieValue = null;
    if (document.cookie && document.cookie != '') {
      var cookies = document.cookie.split(';');
      for (var i = 0; i < cookies.length; i++) {
        var cookie = jQuery.trim(cookies[i]);
        // Does this cookie string begin with the name we want?
        if (cookie.substring(0, name.length + 1) == (name + '=')) {
          cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
          break;
        }
      }
    }
    return cookieValue;
  }
};

/**
 * 获取浏览器语言类型
 */
var getNavLanguage = function() {
  var navLanguage = (navigator.browserLanguage || navigator.language).toLowerCase().slice(0,2);
  switch (navLanguage) {
    case 'zh':
      navLanguage = 'cn';
      break;
    case 'ko':
      navLanguage = 'ko'
      break;
    default:
      navLanguage = 'en';
  }
  return navLanguage;
}

我的个人博客

https://www.wangyanan.online

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^