vue中 使用 vue-i18n 切换中英文

兼容性：

支持 Vue.js 2.x 以上版本

安装方法：

npm install vue-i18n

1、准备本地的翻译信息

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

2、创建带有选项的 VueI18n 实例

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

3、在 main.js 中引入 vue-i18n （前提是要先引入 vue），并把 i18n 挂载到 vue 根实例上

import VueI18n from 'vue-i18n'

Vue.use(VueI18n)


const app = new Vue({
    router,
    i18n,
    ...App
}).$mount('#app')

5、在 HTML 模板中使用

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