图片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(‘’)
