Vue

作者: 誰在花里胡哨 | 来源:发表于2020-12-04 14:18 被阅读0次
效果图:
image.png

安装:

npm install --save vue-i18n
image.png

文件目录:
创建一个 lang 文件夹

image.png
en.js
export default {
  message:{
    title:'Title'
  }
}

zh.js

export default {
  message:{
    title:'标题'
  }
}

index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import zhLocale from './zh'
import enLocale from './en'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'zh', //默认显示语言
  messages: {
    zh: {
      ...zhLocale,
    },
    en: {
      ...enLocale,
    }
  }
})

export default i18n

main.js中引入

image.png
使用:
<template>
  <div>
    <span>{{$t('message.title')}}</span>
    <button @click="changeLang">切换</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeLang() {
      let lang = this.$i18n.locale
      this.$i18n.locale = lang == 'zh' ? 'en' : 'zh'
    }
  }
}
</script>

<style>
</style>

相关文章

  • 使用 Vue i18n {{ $t('hello') }}

    vue 完成国际化 使用 vue i18n 1、在 main.js 中 引入 vue-i18nimport vue...

  • vue之支持多语言切换

    Vue I18n 是 Vue.js 的国际化插件 vue I18n 参考链接 NPM安装 vue-i18n 插件 ...

  • Vue I18n实际应用

    最近在实际项目中使用过vue i18n插件实现国际化功能,但是发现网上对于异步加载实现国际化功能的案例不多,总结一...

  • Vue + Element + i18n 国际化

    1.安装Vue项目国际化需要的包---vue-i18n 2. 配置文件 由于需要把i18n作为独立模块使用,所以配...

  • i18n国际化

    vue中如何使用i18n实现国际化 一、前言 项目中需要实现多语言切换,这时候接触到国际化,前端框架无数,其中几种...

  • Vue项目实现国际化

    Vue项目实现国际化 一:自己配置 i18n 完成国际化 1、创建项目,在项目中安装 vue-i18n 2、在ma...

  • vue组件中的国际化i18n在js中使用时未生效的处理

    在国际化i18n组件使用中,我们之前的用法有点错误,我总结一下哈:在vue组件的