博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue-i18n使用及踩坑记录
阅读量:6716 次
发布时间:2019-06-25

本文共 914 字,大约阅读时间需要 3 分钟。

使用步骤

1. 安装

npm i vue-i18n

2. vue-cli下使用

//1. 引入 vue-i18nimport Vue from 'vue'import VueI18n from 'vue-i18n'Vue.use(VueI18n)//2. 定义messagesconst messages = {  en: {    text: {      hello: 'hello world'    }  },  zh: {    text: {      hello: '你好、世界'    }  }}//如果messages字段很多,可以写成文件,然后引入,例:import En from './en'import Zh from './zh'const messages = {  en: En,  zh: Zh}其中en.js与 zh.js文件//en.jsexport default{    text: {      hello: 'hello world'    }}//zh.jsexport default{    text: {      hello: '你好、世界'    }}//3. new VueI18n()const i18n = new VueI18n({  locale: 'en', // 默认语言  messages})export default i18n//4. 在main.js中挂载i18nnew Vue({  el: '#app',  router,  i18n,  render: h => h(App)})//5. 在html中使用 

{
{$t('text.hello')}}

踩坑记录

const messages = {}const i18n = new VueI18n({  locale: 'en',   messages})

这两处变量一定要是 messages啊,不要写成message 或其他自己定义的什么变量名。

如果不是messages会无效,显示text.hello,但不会报错。
我在这儿挣扎了一上午,挨个跟源文档检查才找出的原因。。。
clipboard.png

转载地址:http://gsumo.baihongyu.com/

你可能感兴趣的文章
JVM总结-内存监视手段及各区域内存溢出解决
查看>>
区块链技术未来注定将改变我们的生活!
查看>>
vGPU 7.X新特性解读,NVIDIA为何力推虚拟GPU?
查看>>
简单的区块链开发入门:Hyperledger Iroha介绍
查看>>
苏宁双十一超燃庆功趴刷爆朋友圈,网友:想去苏宁当员工!
查看>>
品胜新国标智能排插,扮靓时尚家居空间
查看>>
团车发行区间为7.5至9.5美元 闻伟有近76%投票权
查看>>
库蒂尼奥梅西破门 国王杯巴萨6:1塞维利亚晋级
查看>>
李清照曹雪芹“躺枪”,古风歌真的都是词藻堆砌吗?
查看>>
BAT互联网公司的程序员,应用程序架构思路,这些都懂?
查看>>
台湾知名炸鸡连锁店疑供应逾期肉品 遭封存追查
查看>>
澳门2018年入境旅客3580万人次 创记录新高
查看>>
甘肃祁连山加大生态保护 北麓草原冬日现绿头鸭
查看>>
公务员周末送外卖是否违纪?官方暖心回复获网友点赞
查看>>
双星闪耀 上汽大众途岳、全新一代帕萨特联袂亮相
查看>>
监控系统云计算核心技术,主要包括十项技术
查看>>
下半年最值得关注的10个技术公众号
查看>>
MySQL 异步驱动浅析 (一):性能分析
查看>>
理解高性能网络模型
查看>>
提高 JavaScript 开发效率的高级 VSCode 扩展!
查看>>