vue-i18n实现多语言切换的教程

首先安装

npm install vue-i18n

然后在main.js 中引入：

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

配置相关文件

在 src 根目录新建一个 language 文件夹里面放置一个 index.js 和其他语言包，这里以中英文为例，

// index.js
import messagesEn from './en'
import messagesCn from './cn'

const messages = {
  en: {
    message: messagesEn
  },
  cn: {
    message: messagesCn
  }
}

export default messages

// en.js
const messagesEn = {
  login: 'Sign in',
  signOut: 'Sign out',
  register: 'Sign up',
  help: 'Help'
  }

// cn.js
const messagesCn = {
  login: '登录 | 立即登录',
  signOut: '退出',
  register: '注册',
  help: '帮助中心'
 }

然后在 main.js 中引入

import messages from './language/index'

main.js 其他代码

function lang () {
// 将选择的语言存在localStorage中
  let t = window.localStorage.getItem('language')
  if (t) return t
  // 默认中文
  else return 'cn'
}

const language = lang()

// 自定义 window 的 lang 属性
window.lang = lang()

// 创建一个 i18n 实例
const i18n = new VueI18n({
  locale: language,    // 语言标识
  messages
})

// new vue 中加入 i18n
new Vue({
  el: '#app',
  router,
  store,
  i18n,
  template: '',
  components: { App }
})

切换语言

在切换的组件的事件方法代码中加入一下代码即可

this.$i18n.locale = 'en'
window.localStorage.setItem('language', 'en')