vue-i18n使用及踩坑记录

使用步骤

1. 安装

npm i vue-i18n

2. vue-cli下使用

//1. 引入 vue-i18n
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)//2. 定义messages
const 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.js
export default{text: {hello: 'hello world'}
}
//zh.js
export default{text: {hello: '你好、世界'}
}//3. new VueI18n()
const i18n = new VueI18n({locale: 'en', // 默认语言messages
})
export default i18n//4. 在main.js中挂载i18n
new Vue({el: '#app',router,i18n,render: h => h(App)
})//5. 在html中使用<h3 class=title> {{$t('text.hello')}} </h3>

踩坑记录

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

这两处变量一定要是 messages啊,不要写成message 或其他自己定义的什么变量名。
如果不是messages会无效,显示text.hello,但不会报错。
我在这儿挣扎了一上午,挨个跟源文档检查才找出的原因。。。
clipboard.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/451292.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

idea搭建web项目及tomcat部署总结

该文章为引用文章&#xff0c;原地址为&#xff1a;https://www.cnblogs.com/shindo/p/7272646.html 后面有我自己搭建过程中遇到的问题及解决方案&#xff0c;请参考。 一、创建简单web项目 1、创建一个web project File -> new Project ->选择project sdk 为1.6&#x…

Activiti工作流框架学习(一)环境的搭建和数据表的了解

一、什么是工作流 工作流(Workflow)&#xff0c;就是“业务过程的部分或整体在计算机应用环境下的自动化”&#xff0c;它主要解决的是“使在多个参与者之间按照某种预定义的规则传递文档、信息或任务的过程自动进行&#xff0c;从而实现某个预期的业务目标&#xff0c;或者促使…

中国消费者为何不愿为App付费?

Facebook收购Instagram之后&#xff0c;国内的开发者们唏嘘不已。Instagram的用户不过3000万&#xff0c;却能卖出10亿美元的价格。如果Instagram在国内的话&#xff0c;就算没被关闭也会被抄袭。如果通过收费来赚钱的话&#xff0c;也会因为黑卡变得颗粒无收&#xff0c;最终很…

什么是交换分区

SWAP就是LINUX下的虚拟内存 分区,它的作用是在 物理内存 使用完之后,将磁盘空间(也就是SWAP分区)虚拟成内存来使用.它和Windows系统的交换文件作用类似&#xff0c;但是它是一段连续的磁盘空间&#xff0c;并且对用户不可见。

基础、语法都不是最重要的,学Python最重要的是什么?编程思路!

论述 一些朋友自学python过程中&#xff0c;发现书也能看懂&#xff0c;书上的玩具代码也能看懂&#xff0c;但为啥自己不能做习题&#xff0c;不能写代码解决问题&#xff0c;自己不能动手写代码&#xff1f; 原因 初学者没有学会计算思维、解决问题的方法、编程思路。编程思路…

Windows下启动,关闭Nginx命令

启动 直接点击Nginx目录下的nginx.exe 或者 cmd运行start nginx 关闭 nginx -s stop 或者 nginx -s quit stop表示立即停止nginx,不保存相关信息 quit表示正常退出nginx,并保存相关信息 重启(因为改变了配置,需要重启) nginx -s reload 转载于:https://www.cnblogs…

什么是守护进程?

守护进程是在后台运行不受终端控制的进程&#xff08;如输入、输出等&#xff09;&#xff0c;一般的网络服务都是以守护进程的方式运行。守护进程脱离终端的主要原因有两点&#xff1a;&#xff08;1&#xff09;用来启动守护进程的终端在启动守护进程之后&#xff0c;需要执行…

Activiti工作流引擎的使用

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 Activiti工作流引擎使用 1.简单介工作流引擎与Activiti 对于工作流引擎的解释请参考百度百科&#xff1a;工作流引擎 1.1 我与工作流引…

Flurry调查报告:图片和视频应用增长速度最快

据外国媒体报道&#xff0c;移动数据分析公司Flurry近期对应用分类的欢迎度进行研究后发现&#xff0c;就用户使用的时间而言&#xff0c;“图片和视频”应用已成为增长最快的移动应用。 Flurry对各种应用分类的800多万移动用户进行了调查&#xff0c;并利用其分析工具跟踪了1…

JS内存管理与垃圾回收

javascript的内存管理Javascript 是那些被称作垃圾回收语言当中的一员。垃圾回收语言通过周期性地检查那些之前被分配出去的内存是否可以从应用的其他部分访问来帮助开发者管理内存。换句话说&#xff0c;当计算机发现有的内存已经不能被访问到了&#xff0c;就会把它们标记为垃…

牛客网分糖果

题解&#xff1a; 考试的时候没有想出来。。。 刚开始想了个比较错误的dp 后来想到了容斥。。 但是没有想到怎么去维护这个东西。。 按照一般的套路 至少有一个相邻相等的-至少有两个相邻相等的 但是这道题里这样并不好维护 我们考虑用dp来算这个东西 f[i]f[j]*min(a[j].....a[…

HTTP 503 错误 – 服务不可用 (Service unavailable)

介绍因暂时超载或临时维护&#xff0c;您的 Web 服务器目前无法处理 HTTP 请求。 其含义是&#xff0c; 这是一个暂时情况&#xff0c;会有一些延误&#xff0c; 过 后将会得到缓解。 有些服务器在这种情况下也许干脆拒绝套接字&#xff08;socket&#xff09; 连接&#xff0c…

SHA 加密是什么( sha1 和 MD5 的区别 )

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 SHA 安全哈希算法&#xff08;Secure Hash Algorithm&#xff09;主要适用于数字签名标准&#xff08;Digital Signature Standard DSS…

10个管理工作时间的小技巧

导读&#xff1a;如何才能稳步追随社会的变迁&#xff0c;如何才能留住飞逝的时间。俗话说&#xff1a;“一寸光阴一寸金&#xff0c;寸金难买寸光阴。”珍惜现在的时光&#xff0c;将来才不会为年轻时挥霍的时间而感到悔恨。三位作者Joe Mathews&#xff0c;Don Debolt&#x…

12-思科防火墙:ASA会话超时

一、实验拓扑&#xff1a;二、实验要求&#xff1a;DCD&#xff1a;死亡检测时间&#xff0c;默认R2 Telnet上去保持时间为1个小时&#xff0c;超时就会被清除掉&#xff0c;这里要求变为4小时&#xff0c;每15s就会发送5个DCD检测包&#xff0c;如没回应就剔除掉&#xff0c;回…

orCAD使用Orcad Capture CIS按Room摆放

http://www.sig007.com/EDAguide/176.html 37 使用Orcad Capture CIS按Room摆放 &#xff08;1&#xff09;打开原理图某一工程页 &#xff08;2&#xff09;按Ctrl键依次选中需要建Room的元件&#xff0c;右击&#xff0c;选择Edit Properties 在Filter by 下拉菜单中选择Cad…

503错误的原因和解决方法

如果出现“Service Unavailable”的提示&#xff0c;刷新几下又可以访问。 出现这种情况是由于您的网站超过了iis限制造成的 由于2003的操作系统在提示IIS过多时并非像2000系统提示“链接人数过多”&#xff0c;而是提示"Service Unavailable",出现这种情况是由于网…

Java中十六进制转换 Integer.toHexString()

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 用例&#xff1a; Long.toHexString(number) 其中 number 是一个long类型参数。 描述&#xff1a; java.lang.Integer.toHexString(…

细数25个硅谷最热创业公司 寻找创业灵感

【CSDN编译报道】硅谷堪称高科技产业之乡&#xff0c;每当提起就能联想到影响全球产业的各大著名企业Mircosoft、Google、Adobe、Oracle、Yahoo、SAP、intel等。而硅谷也被誉为创业公司的天堂&#xff0c;多如繁星的初创公司Karma、99Dresses、Getaround、Omada Health、Social…

数据特征分析:2.对比分析

对比分析 两个相互联系的数&#xff08;指标&#xff09;进行比较&#xff08;绝对数比较、相对数比较&#xff09; 对比分析 对比分析 → 两个互相联系的指标进行比较 绝对数比较&#xff08;相减&#xff09; / 相对数比较&#xff08;相除&#xff09;结构分析、比例分析、…