vue 配置 i18n 多语言

2022-07-17 14:01:53 阅读：298 来源： 互联网

1、安装 i18n 模块

vue-i18n与vue存在版本兼容性问题，我们这里用的vue 2.6.10，配合vue-i18n 8.2.1版本使用
安装vue-i18n
npm install vue-i18n@8.2.1 --save

2、配置main.js

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
  locale: window.sessionStorage.getItem('lang') || 'zh',
  messages: {
    zh: require('@/lang/zh.js'),
    en: require('@/lang/en.js'),
    ja: require('@/lang/ja.js')
  }
})
if (
  window.sessionStorage.getItem('lang') === 'zh' ||
  window.sessionStorage.getItem('lang') === null
) {
  Vue.use(ElementUI)
} else {
  Vue.use(ElementUI, { locale })
}

3、封装组件，用来切换语言

<template>
  <div class="navbar">
    <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />

    <breadcrumb class="breadcrumb-container" />

    <div class="right-menu">
      <el-dropdown class="username-container hover-pointer" trigger="click">
        <span>{{ name }} <i class="el-icon-caret-bottom el-icon--right" />
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="feedBack">
            <span style="display:block;">反馈建议</span>
          </el-dropdown-item>
          <el-dropdown-item @click.native="logout">
            <span style="display:block;">注销</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <span class="delimiter">|</span>
      <el-dropdown class="lang-container hover-pointer" trigger="click">
        <span>{{ language }} <i class="el-icon-caret-bottom el-icon--right" />
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="changeLangauge('zh')">
            <span style="display:block;">简体中文</span>
          </el-dropdown-item>
          <el-dropdown-item @click.native="changeLangauge('en')">
            <span style="display:block;">English</span>
          </el-dropdown-item>
          <el-dropdown-item @click.native="changeLangauge('ja')">
            <span style="display:block;">日本语</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'

export default {
  components: {
    Breadcrumb,
    Hamburger
  },
  data() {
    return {
      language: ''
    }
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'name'
    ])
  },
  created() {
    this.showLangauge()
  },
  methods: {
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
    },
    feedBack() {
      console.log('feedBack')
    },
    async logout() {
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    },
    showLangauge() {
      const currentLang = window.sessionStorage.getItem('lang')
      switch (currentLang) {
        case 'zh':
          this.language = '简体中文'
          break
        case 'en':
          this.language = 'English'
          break
        case 'ja':
          this.language = '日本语'
      }
    },
    changeLangauge(lang) {
      this.$i18n.locale = lang
      window.sessionStorage.setItem('lang', lang)
      window.location.reload()
    }
  }
}
</script>

<style lang="scss" scoped>
.navbar {
  height: 50px;
  overflow: hidden;
  position: relative;
  background: #fff;
  // box-shadow: 0 1px 4px rgba(0,21,41,.08);
  margin-right: 10px;

  .hamburger-container {
    line-height: 46px;
    height: 100%;
    float: left;
    cursor: pointer;
    transition: background .3s;
    -webkit-tap-highlight-color:transparent;

    &:hover {
      background: rgba(0, 0, 0, .025)
    }
  }

  .breadcrumb-container {
    float: left;
  }

  .right-menu {
    float: right;
    height: 100%;
    line-height: 50px;
    margin-right: 10px;

    &:focus {
      outline: none;
    }

    .hover-pointer {
      span {
        cursor: pointer;
      }
    }
    .delimiter {
      margin: 0 6px;
      vertical-align: 1px;
    }
  }
}
</style>

4、配置多语言包

src/lang目录下新建 zh.js、en.js、ja.js文件

// zh.js
module.exports = {
  dashboard: {
    title: '概览'
  },
  userManager: {
    title: '用户管理'
  },
  logRecord: {
    changeRecord: '变更记录',
    applyRecord: '申请记录'
  }
}


// en.js
module.exports = {
  dashboard: {
    title: 'Dashboard'
  },
  userManager: {
    title: 'userManager'
  },
  logRecord: {
    changeRecord: 'changeRecord',
    applyRecord: 'applyRecord'
  }
}


// ja.js
module.exports = {
  dashboard: {
    title: '概览'
  },
  userManager: {
    title: '用户管理'
  },
  logRecord: {
    changeRecord: '变更记录',
    applyRecord: '申请记录'
  }
}

5、在vue文件中使用

vue代码使用$t获取国际化
普通文本使用方式： {{ $t('m.fm.components.fields.input') }}
标签内使用方式： :placeholder="$t('m.fm.components.fields.input')"
js内使用方式: this.$t('m.fm.components.fields.input')

<template>
  <div class="dashboard-container">
    <div class="dashboard-text">{{ name }}</div>
  </div>
</template>

<script>

export default {
  name: 'Dashboard',
  data() {
    return {
      name: this.$t('dashboard.title')
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 10px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>

切换语言后，name字段的现实就根据切换的语言显示

标签：lang,vue,zh,语言,title,js,i18n
来源： https://www.cnblogs.com/DeryKong/p/16486756.html