vue+VueI18n 项目国际化 笔记

安装

npm install vue-i18n

语言资源

1. 创建一个lang文件夹
2. 创建相关语言的json文件和一个配置index.js文件 en.json

   {
       "zh":"中文",
        "ja":"日本語",
        "en":"English"
   }
   

   zh.json

   {
       "zh":"中文",
        "ja":"日本語",
        "en":"English"
   }
   

index.js 配置

引入vue 和vue-i18n

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

导入语言资源

var DEFAULT_LANG = 'zh';
var zh = require('./zh.json');
var en = require('./en.json');
var locales = {
 zh: zh,
 en: en
}

创建vuei8n实例

var i18n = new VueI18n({
  locale: DEFAULT_LANG,
  messages: locales,
})

完整配置

1. 缓存LOCALE_KEY，保留用户语言习惯

2. 切换语言，更换整体样式（确保不同语言的样式兼容）

3. element-ui组件国际化

main.js 引入 并挂在至vue实例中

import i18n from '../static/lang/index';

var app = new Vue({
    router,
    store,
    i18n,
    render: h => h(App)
});

项目中使用：

在html中，通过$t()使用

在js中 通过this.$i18n.t()使用

修改语言

this.$i18n.locale = 'zh';