项目使用i18n
【项目使用i18n】项目中更加模块化的使用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的根实例中。
配置好以后,可以正式使用了。
{{ $t('locales.' + locale) }}
//渲染更改语言的按钮
export default {
data () {return { locales: ['en-US', 'zh-CN'] }
}
}{{ $t('navigation.top') }}
{{ $t('navigation.new') }}
{{ $t('navigation.show') }}
{{ $t('navigation.ask') }}
{{ $t('navigation.job') }}
推荐阅读
- 由浅入深理解AOP
- 【译】20个更有效地使用谷歌搜索的技巧
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus|MybatisPlus LambdaQueryWrapper使用int默认值的坑及解决
- MybatisPlus使用queryWrapper如何实现复杂查询
- iOS中的Block
- Linux下面如何查看tomcat已经使用多少线程
- 使用composer自动加载类文件
- android|android studio中ndk的使用
- 使用协程爬取网页,计算网页数据大小