iT邦幫忙

0

[筆記]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

https://ithelp.ithome.com.tw/upload/images/20210303/20120722qRELhtmw7i.png

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>

7.完成
https://ithelp.ithome.com.tw/upload/images/20210303/20120722WBjHSneGjg.png


尚未有邦友留言

立即登入留言