电商系统中实现国际化

摘要：在vue的电商系统中我们需要支持多种语言切换，满足国际化需求。 vue-i18n是一个vue插件，主要作用就是让项目支持国际化多语言，使用方便快捷，能很轻松的将我们的项目国际化。主要介绍使用vue-i18n实现切换中英文效果。

一、 先安装vue-i18n

使用npm安装vue-i18n

npm install vue vue-i18n --save

二、 引入vue-i18n

在main.js里引入vue-i18n和相关用到的文件

import Vue from \'vue\'

import \'babel-polyfill\'

import \'normalize.css/normalize.css\' // A modern alternative to CSS resets
import Element from \'element-ui\'
import \'element-ui/lib/theme-chalk/index.css\'

import UIComponents from \'ui-components\'
import EnComponents from \'@/components\'
import VueAwesomeSwiper from \'vue-awesome-swiper\'
import \'swiper/dist/css/swiper.css\'

import \'@/styles/index.scss\' // global css
import App from \'./App\'
import router from \'./router\'
import store from \'./store\'

import i18n from \'./lang\' // Internationalization
import \'./icons\' // icon
import \'./permission\' // permission control
// 全局注册echarts、jsonp
import echarts from \'echarts\'
import axios from \'axios\'
// register global utility filters.
import * as filters from \'./filters\' // global filter
// register global utility mixins.
import mixin from \'./utils/mixin\'
import * as API_Common from \'./api/common\'
import Cookies from \'js-cookie\'

Vue.use(Element, {
  size: \'small\',
  i18n: (key, value) => i18n.t(key, value)
})

Vue.use(UIComponents)
Vue.use(EnComponents)
Vue.use(VueAwesomeSwiper)

Vue.prototype.$echarts = echarts
Vue.prototype.$http = axios

Vue.prototype.$message.success = function(text) {
  Vue.prototype.$message({
    showClose: true,
    message: text,
    type: \'success\',
    duration: 5000
  })
}
Vue.prototype.$message.error = function(text) {
  Vue.prototype.$message({
    showClose: true,
    message: text,
    type: \'error\',
    duration: 5000
  })
}

Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

Vue.mixin(mixin)

Vue.config.productionTip = false
API_Common.getLanguage(Cookies.get(\'adminLanguage\') || \'zh\').then(response => {
  new Vue({
    el: \'#app\',
    beforeCreate() { this.$i18n.setLocaleMessage(Cookies.get(\'adminLanguage\') || \'zh\', response) },
    router,
    store,
    i18n,
    template: \'<App/>\',
    components: { App }
  })
}).catch(() => {
  Element.Message.error(\'设置语言失败，请刷新页面重试！\')
  new Vue({
    el: \'#app\',
    router,
    store,
    i18n,
    template: \'<App/>\',
    components: { App }
  })
})

三、 从后台获取语言包数据

1.新建文件夹lang并在里index.js里引入vue-i18n并且创建带有选项的 VueI18n 实例
import Vue from \'vue\'
import VueI18n from \'vue-i18n\'
import Cookies from \'js-cookie\'
Vue.use(VueI18n)

const messages = {
}

const i18n = new VueI18n({
  locale: Cookies.get(\'adminLanguage\') || \'zh\', // set locale  
  messages // set locale messages
})

export default i18n

注意：文中有js-cookie 实例中加载了从后台请求过来的语言包

2.在vuex store里modules新建APP.js里切换的时候，根据语言加载各个国家的语言
import Cookies from \'js-cookie\'
const app = {
  state: {
    sidebar: {
      opened: !+Cookies.get(\'adminSidebarStatus\'),
      withoutAnimation: false
    },
    device: \'desktop\',
    language: Cookies.get(\'adminLanguage\') || \'zh\'
  },
  mutations: {
    TOGGLE_SIDEBAR: state => {
      if (state.sidebar.opened) {
        Cookies.set(\'adminSidebarStatus\', 1)
      } else {
        Cookies.set(\'adminSidebarStatus\', 0)
      }
      state.sidebar.opened = !state.sidebar.opened
      state.sidebar.withoutAnimation = false
    },
    CLOSE_SIDEBAR: (state, withoutAnimation) => {
      Cookies.set(\'adminSidebarStatus\', 1)
      state.sidebar.opened = false
      state.sidebar.withoutAnimation = withoutAnimation
    },
    TOGGLE_DEVICE: (state, device) => {
      state.device = device
    },
    SET_LANGUAGE: (state, language) => {
      state.language = language
      Cookies.set(\'adminLanguage\', language)
    }
  },
  actions: {
    toggleSideBar({ commit }) {
      commit(\'TOGGLE_SIDEBAR\')
    },
    closeSideBar({ commit }, { withoutAnimation }) {
      commit(\'CLOSE_SIDEBAR\', withoutAnimation)
    },
    toggleDevice({ commit }, device) {
      commit(\'TOGGLE_DEVICE\', device)
    },
    setLanguage({ commit }, language) {
      commit(\'SET_LANGUAGE\', language)
    }
  }
}

export default app
3.在utils里新建文件转换router.meta.title，用于面包屑侧边栏标签视图
export function generateTitle(title) {
  return this.$t(\'route.\' + title) // $t :this method from vue-i18n ,inject in @/lang/index.js
}
4.在utils里新建文件request.js 在request方法里加 如果是刷新token或者登录，不需要检查token直接请求语言包
export default function request(options) {
  console.log(11, options)
  // 如果是刷新token或者登录，不需要检查token直接请求。
  if (options.url.indexOf(\'systems/admin-users/login\') + options.url.indexOf(\'systems/admin-users/token\') + options.url.indexOf(\'validator\') + options.url.indexOf(\'language\') > -4) {
    // console.log(options.url + \' | 请求的刷新token或是登录，不需要检查token直接请求。\')
    return service(options)
  }
  return new Promise((resolve, reject) => {
    checkToken(options).then(() => {
      service(options).then(resolve).catch(reject)
    })
  })
}

四、根据vuex切换语言动态加载语言包

<script>
  import * as API_Common from \'../../api/common\'
  export default {
    computed: {
      language() {
        return this.$store.getters.language
      }
    },
    methods: {
      handleSetLanguage(lang) {
        API_Common.getLanguage(lang).then(async response => {
          this.$i18n.setLocaleMessage(lang, response)
          await this.$nextTick()
          this.$i18n.locale = lang //通过切换locale的值来实现语言切换
          this.$store.dispatch(\'setLanguage\', lang)
          this.$message({
            message: lang === \'zh\' ? \'语言切换成功\' : \'switch language success\',
            type: \'success\'
          })
        })
      }
    }
}
</script>

五、页面使用

{{$t(\'group.text1\')}}
vue 组件form表单使用 :label="$t(\'group.text1\')"

 

 

版权声明：本文为javashop-docs原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/javashop-docs/p/13673670.html