Vue使用VueI18n国际化

news/2024/7/9 23:54:20 标签: vue

1.安装VueI18n

npm install vue-i18n --save-dev

2.定义好国际化文件
index.js

import hk from './zh-HK'
import cn from './zh-CN'
const messages = {
  hk: {
    message: hk
  },
  cn: {
    message: cn
  }
}
export default messages

zh-CN.js

const message = {
  connected: '已连接'
}
export default message

zh-HK.js

const message = {
  connected: '已鏈接'
}
export default message

在这里插入图片描述
3.在main.js中引入VueI18n和message文件

import VueI18n from 'vue-i18n'
import messages from './assets/lang/index'
Vue.use(VueI18n)

const i18n = new VueI18n({
  // 义默认语言
  locale: 'cn',
  messages
})

new Vue({
  router,
  i18n,
  store,
  render: h => h(App)
}).$mount('#app-box')

4.在vue项目中

更改this.$i18n.locale = ‘cn’或者this.$i18n.locale =‘hk’就可以切换语言, 标签中使用
{{ $t("message.connected") }} 可以显示对应的中文,this.$t("message.connected") 可以在js中引用对应的中文。

http://www.niftyadmin.cn/n/614641.html

相关文章

Spring Boot / Spirng Cloud 集成Rabbit MQ

注意&#xff1a; spring cloud版本&#xff1a;Greenwich.RELEASE spring boot 版本&#xff1a; 2.1.5.RELEASE 1.导包&#xff0c;在pom.xml中导入 <dependency><groupId>org.springframework.amqp</groupId><artifactId>spring-rabbit</artifac…

spring cloud集成swagger2

1.项目引入依赖 <!-- swagger --><dependency><groupId>com.spring4all</groupId><artifactId>swagger-spring-boot-starter</artifactId></dependency>2.bootstrap.yml 或application.yml中增加配置 swagger:enabled: true # 是…

java / spring boot /spring cloud /前后端分离/vue 跨域处理

前后端分离避免不了跨域&#xff0c;在java流行的spring 框架下处理跨域&#xff0c;比较简单的是直接修改java的配置&#xff0c;使我们的应用支持跨域。 方法1&#xff1a;在controller类上添加注解CrossOrigin 即可&#xff0c;这个注解其实是CORS的实现。 方法2&#xff1a…

idea 设置maven 以及 maven配置文件配置阿里/公共中央仓

maven配置阿里中央仓 1.主要修改maven的settings.xml文件&#xff0c;在maven的config目录下 2.查找mirrors标签&#xff0c;在标签里增加如下配置 <mirror><id>aliyun</id><mirrorOf>*</mirrorOf><name>aliyun Maven</name><ur…

Vue的全局组件/加载/Loading/请求转圈圈组件

Vue每次请求都要出现加载图案&#xff0c;这样的需求需要设置一个全局的组件&#xff0c;然后每次请求和请求结束都要调用这个组件的开关。这样就可以实现展示给用户看系统在请求后台的需求。 首先&#xff1a; 1.制作一个全局的加载组件&#xff0c;Loading.vue 摆放的路径请随…

Vue /javascript /JS日期时间转换工具

字符串转换成日期&#xff0c;日期转换成字符中&#xff0c;废话不说&#xff0c;上代码&#xff01; //日/月/年 export function stringToDate (dateStr,separator) {if(!separator){separator"/";}var dateArr dateStr.split(separator);var day parseInt(date…

spring boot中多线程并发及利用CountDownLatch并发执行多线程

1.配置线程类 import org.springframework.aop.interceptor.AsyncUncaughtExceptionHandler; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.ComponentScan; import org.springframework.context.annotation.Configura…

空指针问题

什么是java空指针异常&#xff1f; 就是java本身引用为空&#xff0c;却引用了方法 1、分析下之前遇到的空指针异常案例 案例一&#xff08;1&#xff09;&#xff1a; package TestString;import java.util.*;public class TString{public static void main(String[] args…