i18n的使用（1）

既然有用到 i18n 那么，肯定需要先安装啦！

1：安装方式

npm install vue-i18n

　　

2：使用方式

1：在main.js引入

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

 

2:准备本地的翻译信息

const messages = {
  zh: {
    message: {
      hello: '好好学习，天天向上！'
    }
  },
  en: {
    message: {
      hello: 'good good study, day day up!'
    }
  }
}

3：创建带有选项的 i18n实例

const i18n = new VueI18n({
  locale: 'zh', // 语言标识
  messages
})

4：将i18n挂载在vue上

new Vue({
  el: '#app',
  router,
  i18n,
  components: { App },
  template: '<App/>'
})

5：使用方式

    <div id="app">
      <h1 style="font-size: 16px; text-align: center;">{{ $t("message.hello") }}</h1>
    </div>

效果

 将第三步（创建带有选项的 i18n实例）中的  ‘ locale ’ ，换成 ” en “ ，

const i18n = new VueI18n({
  locale: 'en', // 语言标识
  messages
})

后的效果图

全部代码

//main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import 'iview/dist/styles/iview.css' // 引入iview css样式
import VueI18n from 'vue-i18n'

Vue.config.productionTip = false
Vue.use(iView) //使用iview组件
Vue.use(VueI18n)

const messages = {
  zh: {
    message: {
      hello: '共产主义接班人'
    }
  },
  en: {
    message: {
      hello: 'successors to the communist cause!'
    }
  }
}

const i18n = new VueI18n({
  locale: 'en', // 语言标识
  messages
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  i18n,
  components: { App },
  template: '<App/>'
})

//vue文件

<template>
  <div>
    <div id="app">
      <h1 style="font-size: 16px; text-align: center;">{{ $t("message.hello") }}</h1>
    </div>
  </div>
</template>
<style lang="">
  h1{
    color: skyblue;
  }
</style>
<script>
export default {
  data() {
    return {
    };
  }
};
</script>