Vue 让你从0开始搭建i18n实现资源国际化功能

第一步：安装依赖

依赖vue-i18n，先装依赖：yarn add vue-i18n@8 或 npm install vue-i18n@8

第二步：准备工作

在src下创建：

locale\lang\en.js和locale\lang\zh-CN.js用于存放英文和中文内容

const lang = {
  title: 'Title', // 标题
  home: 'Home' // 首页
}

export default lang

const lang = {
  title: '标题', // 标题
  home: '首页' // 首页
}

export default lang

locale/index.js创建vuei18n实例:

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import en from './lang/en'
import zh from './lang/zh-CN'

import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: localStorage.getItem('lang') || 'zh-CN',
  messages: {
    'zh-CN': { ...zhLocale, ...zh },
    'en': { ...enLocale, ...en }
  }
})

export default i18n

第三步：在main.js中引入创建好的vuei18n实例

import Vue from 'vue'
import App from './App.vue'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
import i18n from './locale'

Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
})

Vue.config.productionTip = false;

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

第四步：验证

<template>
  <div class="dashboard-container">
    <div>{{ $t('title') }}</div>
    <div>{{ $t('home') }}</div>
    <button type="submit" @click="changeLocale">切换语言</button>
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  methods: {
    changeLocale() {
      const lang = this.$i18n.locale
      if (lang === 'zh-CN') {
        this.$i18n.locale = 'en'
        localStorage.setItem('lang', 'en')
      } else {
        this.$i18n.locale = 'zh-CN'
        localStorage.setItem('lang', 'zh-CN')
      }
    }
  }
}
</script>

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

 

 

 至此已完成vue项目使用i18n完成资源国际化功能