多语言vue-i18n (vue2)

1: 安装 vue-i18n

npm install vue-i18n@8 --save 
// npm install vue-i18n--save  9版本需要vue3.0
// 在vue2环境下，默认安装 npm install vue-i18n 的版本是 [email protected]，
// 报错信息里提示这个版本要求是vue3，所以我们安装适合vue2版本的vue-i18n 依赖包。
// 运行指令查看所以版本
// npm view vue-i18n versions --json

2: 创建语言文件
在这里插入图片描述

// zh.js
const zh={
    lang:"中文",
}
export default zh

// index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
// 引入各个语言配置文件
import zhLocale from './config/zh'
import jaLocale from './config/ja'

// 创建vue-i18n实例i18n
const i18n = new VueI18n({
  // 设置默认语言
  locale: localStorage.getItem('language') || 'zh', // 语言标识
  // 添加多语言（每一个语言标示对应一个语言文件）
  messages: {
    'zh': zhLocale,
    'ja': jaLocale
  }
})

// 暴露i18n
export default i18n

3.main.js

import Vue from 'vue'
import App from './App'
import store from './store'
import router from './router'
import Element from 'element-ui'
import './styles/element-variables.scss'

import i18n from './utils/lang/index'
Vue.config.productionTip = false

var vue = new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App),
  created () {
  }
})

export default vue

4.页面内使用

<template>
  <div>
    <p>{{ $t('lang') }}</p>
  </div>
</template>

5.切换语言状态

      this.$i18n.locale = 'zh';

多语言vue-i18n (vue2)

悦读