项目中更加模块化的使用i18n
新建一个i18n文件夹
i18n
-- en-US.json // JSON文件是编译语言的映射表
-- zh-CN.json
-- index.js //配置
\\ index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import en from './en-US.json'
import cn from './zh-CN.json'
Vue.use(VueI18n)
export default
createdI18n => new VueI18n({
locale:'zh-CN',
messages:{
"en-US":en,
"zh-CN":cn
}
})
//引入并 初始化一个i18n的实例
\\ main.js
import Vue from 'vue';
import App from './App';
import router from './router';
import createdI18n from './components/i18n'
const i18n = createdI18n()
new Vue({
el: '#app',
router,
i18n,
render: h => h(App)
}).$mount('#app');
// 添加在Vue的根实例中。
配置好以后，可以正式使用了。
<template>
<a class="locale" href="javascript:void(0);"
v-for="locale in locales"
:class="{ active: $i18n.locale === locale }"
@click="$i18n.locale = locale">{{ $t('locales.' + locale) }}</a>
</telampte>
<scritp>
//渲染更改语言的按钮
export default {
data () {return { locales: ['en-US', 'zh-CN'] }
}
}
</scritp>
<router-link to="/top">{{ $t('navigation.top') }}</router-link>
<router-link to="/new">{{ $t('navigation.new') }}</router-link>
<router-link to="/show">{{ $t('navigation.show') }}</router-link>
<router-link to="/ask">{{ $t('navigation.ask') }}</router-link>
<router-link to="/job">{{ $t('navigation.job') }}</router-link>
<!--
语法： 使用双大括号 {{ $t('xx') }}
$t() 填写JSON文件的替换值
-->