前言

公司的项目涉及到国际化，之前也没搞过，所以稍微查阅了一些资料，然后自己从0开始实现了国际化。 记录下来以后供以后再次使用。（结尾附源码）第一次写，可能会不尽如人意，不喜可喷，欢迎交流。

正文

安装依赖

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

准备工作

在src下创建：

locale/langs/zh.js 和 locale/langs/en.js 用于存放待翻译的内容

const lang = {
  title: 'title',//（标题）
  title1: 'title1',//（标题2）
  placeholder: 'please enter',//请输入中文
}

export default lang

locale/index.js 创建vuei18n实例，导入element-ui和自己的待翻译的内容

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import en from './langs/en.js'
import zh from './langs/zh.js'
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: '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')

到此全部的准备工作就做完了。

使用

切换国际化语言

methods: {
  changeLocale (lang) {
    this.$i18n.locale = lang
  }
}

模板里使用

<el-date-picker
  v-model="value1"
  type="datetime"
  :placeholder="$t('placeholder')">
</el-date-picker>
<div>
  {{ $t('title') }}
</div>
<div>
  {{ $t('title1') }}
</div>

源码地址：https://github.com/liangtao125061github/vue-0to100-i18n.git

结尾

喜欢的请点个赞吧。