vue使用i18语言切换

最新推荐文章于 2024-06-14 11:56:08 发布

shuleijia

最新推荐文章于 2024-06-14 11:56:08 发布

阅读量1.2k

点赞数

分类专栏： vue 文章标签： 1024程序员节

本文链接：https://blog.csdn.net/shuleijia/article/details/127497257

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.安装i18

npm install vue-i18n

2.在main.js中引入

import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n
import i18n from './lang'

3.在src下新建store文件夹

具体文件

app.js

import Cookies from 'js-cookie'

const app = {
  state: {},
  mutations: {
    SET_LANGUAGE: (state, language) => {
      state.language = language
      Cookies.set('language', language)
    }
  },
  actions: {
    setLanguage({ commit }, language) {
      commit('SET_LANGUAGE', language)
    }
  }
}

export default app

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
import getters from './getters'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    app
  },
  getters
})

export default store

4.src中新建lang文件夹

en.js/ha.js/ja.js/zh.js分别是语言包

以中文zh为例

export default {

    home: '我是首页'
}

index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Cookies from 'js-cookie'
import elementEnLocale from 'element-ui/lib/locale/lang/en' // 英
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// 中
import elementJaLocale from 'element-ui/lib/locale/lang/ja'// 日
import elementKoLocale from 'element-ui/lib/locale/lang/ko'// 韩
import enLocale from './en'
import zhLocale from './zh'
import jaLocale from './ja'
import haLocale from './ha'

Vue.use(VueI18n)

const messages = {
  en: {
    ...enLocale,
    ...elementEnLocale
  },
  zh: {
    ...zhLocale,
    ...elementZhLocale
  },
  ja: {
    ...jaLocale,
    ...elementJaLocale
  },
  ha: {
    ...haLocale,
    ...elementKoLocale
  }
}

const i18n = new VueI18n({
  // set locale
  // options: en | zh | es
  locale: Cookies.get('language') || 'zh',
  // set locale messages
  messages
})

export default i18n

5.具体使用

html代码

<el-dropdown @command="handleCommand">
            <span title="" class="lange">
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown" :append-to-body="false" ref="downdiv">
              <el-dropdown-item class="lang" v-for="(item, key) in language" :key="key" :command="key" :disabled="$i18n.locale === key">{{ item }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

data

data () {
    return {
      language: {
        'zh': 'CHINA(中文)',
        'en': 'English',
        'ja': '日本語',
        'ha': '한국어 공부 해요.'
      }
    }
  },

methods

 // 下拉切换语言
    handleCommand(command) {
      this.get()
      this.set(command)
    },
    get() {
      return this.$store.state.app.language
    },
    set(lang) {
      this.$i18n.locale = lang || 'zh'
      this.$store.dispatch('setLanguage', lang)
    },

最后展示样子