前端实现多语言切换 ： 实现前端页面的资源国际化
一、vue 中引用 vue-i18n 实现国际化
安装 vue-i18nnpm 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="/vue/dist/vue.js"></script><script src="/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
源码下载：/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><!--其他组合情况同理-->
注意：
对于 js 处理
html和text的区别主要在于：如果中文中间含有换行 空格 大于符号 小于符号等，需要将data-ptype设置为html，其他纯文本情况均设置为text。
data-properties里的值需要取properties文件中的key值，多个值用"/"隔开
data-ptype里的值是为了区分类型，多个值用"/"隔开，并且需要保证 “data-properties” 和 "data-ptype "用
"/"隔开的顺序相同，即一一对应。所有需要做多语言处理的标签都需要加上
class="i18n"。上述用法如果无法满足个别特殊情况，可以针对特殊情况单独处理。
直接用$.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 cookieoptions = 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 cookievar 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
