使用vue-i18n实现国际化

下载依赖

yarn add vue-i18n

新建文件夹，文件

mkdir i18n
cd i18n
touch index.js zh.json en.json

xxx.json为文字替换文件，如：

{
  "userManagement": "用户管理",
  "dashboard": "仪表盘",
  "language": "语言", 
  "search": "搜索"
}

{
  "userManagement": "User Management",
  "dashboard": "Dashboard",
  "language": "Language",
  "search": "Search"
}

index.js

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

Vue.use(VueI18n)

const messages = {  
  zh: {    message: zh  }, 
  en: {    message: en  }
}
const storageLanguage = window.localStorage.getItem('locale_language')
let locale = ''
if (!storageLanguage) {
  window.localStorage.setItem('locale_language', 'zh')
  locale = 'zh'
} else {
  locale = window.localStorage.getItem('locale_language')
}

const i18n = new VueI18n({
  locale,  messages
})

export default i18n

在入口文件中导入i18n

import i18n from '@/i18n'
new Vue({
  ...
  i18n,
  ...
})

在模板中替换文案

<template>
  <div>{{ $t('message.search') }}</div>
</template>

这时候还缺乏一个语言切换器

建个切换器组件

。。。（未完待续）

注意：