[笔记]vue-cli i18n 多语系应用练习

参考文章: https://medium.com/easons-murmuring/%E5%9C%A8-vue-cli-%E4%B8%AD%E4%BD%BF%E7%94%A8-i18n-%E5%AF%A6%E4%BD%9C%E5%A4%9A%E5%9C%8B%E8%AA%9E%E7%B3%BB-720ec360783e

1.安装

npm install vue-i18n

2.专案根目录建立common资料夹

    common-config
               -i18n
                  -en.js
                  -tw.js
          -plugins
              -vue-i18n.js

3.en.js为例

    // en.js
export const locale = {
  GENERAL: {
    NAV_OPTIONS: ['Home', 'About', 'Contact'],
    WELCOME_WORD: 'Welcome to your Vue.js application',
    OK: 'ok',
    CONTINUE: 'continue',
    CANCEL: 'cancel',
    GUEST: 'guest',
  },
}

4.vue-i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'

import { locale as en } from '../config/i18n/en'
import { locale as tw } from '../config/i18n/tw'
import { locale as jp } from '../config/i18n/jp'



Vue.use(VueI18n)

let messages = {}
messages = { en, tw ,jp} // 这边把所有的翻译文档JS放进来

export default new VueI18n({
    locale: 'jp', // set locale (指定要读哪一份译文文档)
    messages, // set locale messages
})

5.在vue档中使用 {{$t('译文文档的栏位名称')}}

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>{{ $t('GENERAL.WELCOME_WORD') }}</h1>
    <router-view/>
  </div>
</template>

6.也可以在script中调用 (App.vue)，设置语言，不需要再额外import

<script>
export default {
  name: 'App',
  mounted(){
    this.$i18n.locale = "en"
  }
}
</script>

更正 :
必须先在 main.js中引入，才可以在其他的component中使用 this.$i18n.locale

// main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import i18n from '../common/plugins/vue-i18n.js' // 这边引入

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  i18n, // 这边也引入，跟router,vuex 使用方式是一样的
  components: { App },
  template: '<App/>'
})

7.完成