vue-i18n
在src/目录下新建lang文件夹
lang/文件中有en.js,index.js,zh.js
例如en.js
export default{
route:{
'home':'home',
'component':'component',
'permission':'permission',
'i18n':'i18n',
'drag':'drag',
'permission-instruction':'permission instruction',
'permission-page':'permission page'
},
login:{
'title':'admin-vue'
}
}
zh.js
export default{
route:{
'home':'首页',
'component':'组件',
'permission':'权限',
'i18n':'语言切换',
'drag':'拖拽',
'permission-instruction':'权限指令',
'permission-page':'权限页面'
},
login:{
'title':'后台登录'
}
}
index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
import enLocale from './en'
import zhLocale from './zh'
const messages={
en:{
...enLocale,
...elementEnLocale
},
zh:{
...zhLocale,
...elementZhLocale
}
}
const i18n=new VueI18n({
locale:'zh',
messages,
})
export default i18n
在main.js中引入
import i18n from './lang/index.js'
new Vue({
el: '#app',
i18n,
components: { App },
template: '<App/>'
})
在组件中的使用
在模板中使用<p>{{ $t("route.home") }}</p>
在有的项目中需要循环侧边栏导航，所以写了一个工具方法
const generateTitle=function(title){
const hasKey=this.$te('route.'+title)
const translatedTitle=this.$t('route.'+title)
if(hasKey){
return translatedTitle
}
return title
}
export {generateTitle}
在组件中使用时，引入这个工具方法
语言的切换
vue-i18n其他的国际化
请参考
vue-i18n
jquery-i18n-properties
这是不用vue时，js的前端国际化
一般会新建一个文件存放语言信息
i18n/language_en.properties
language_text=Hello world!
language_lang=Chinese
i18n/language_zh.properties
language_text=你好，世界
language_lang=中文
html文件
<script src='xxx/jquery-i18n-properties.js'></script>
<div>
<p id="text" data-locale='string_text'></p>
<button onclick="switchLang()" id="lang" data-locale='string_lang'></button>
</div>
<script>
var LANGUAGE_CODE = "zh"; //标识语言
function loadProperties(type) {
jQuery.i18n.properties({
name: 'language', // 资源文件名称
path: 'i18n/', // 资源文件所在目录路径
mode: 'map', // 模式：变量或 Map
language: type, // 对应的语言
cache: false,
encoding: 'UTF-8',
callback: function () { // 回调方法
$("[data-locale]").each(function(){
console.log($(this).data("locale"));
$(this).html($.i18n.prop($(this).data("locale")));
});
}
});
}
function switchLang() {
LANGUAGE_CODE = LANGUAGE_CODE == 'zh' ? 'en' : 'zh';
loadProperties(LANGUAGE_CODE);
}
$(document).ready(function () {
LANGUAGE_CODE = jQuery.i18n.normaliseLanguageCode({}); //获取浏览器的语言
loadProperties(LANGUAGE_CODE);
})
</script>
