vue国际化插件VueI18n

图片1.png

vue-i18n是一款针对Vue.js 的国际化插件

要把网站的所有数据配置成中英文json文件，需要编写大量中英文对照表，适合于少量的固定翻译

-切换的语言版本很少，并且本身网站不复杂
-整体内容相对固定，布局比较简洁，扁平化，改动不会太频繁可以选用vue国际化
-提取出项目中使用的静态文本，使用语言包进行管理, 样式和功能不需要重复开发

使用方式1：script引入

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

使用方式2：命令行安装

cnpm install vue-i18n --save
npm install vue-i18n
yarn add vue-il8n
//在main.js里面配置
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);// 引入各个语言配置文件
import zh from './config/zh';
import en from './config/en';// 创建vue-i18n实例i18n
const i18n = new VueI18n({
// 设置默认语言
  locale: localStorage.getItem('locale') || 'zh', //语言标识
  messages: {
    zh,
    en
  },
  fallbackLocale: 'zh', //如果在message中找不到相应的键值将回退到原本的语言
  formatFallbackMessages: true //如果在message中找不到相应的键值将回退到原本的语言
})

//将il8n 注入到vue实例中
new Vue({
  el: '#app',
  i18n,
  render: h => h(App)
});

模板语法

vue模板文件中使用:通过{{$t(‘’)}}方法引用文案
JS中使用：this.$t(‘’)