使用vite搭建vue3項目(三) 配置國際化

配置國際化

 安裝vue-i18n

npm install vue-i18n@next  

在src目錄下建立locales文件夾，並在文件下面創建zh.ts、en.ts文件（中文、英文），本文只做中英文切換作為案例，后續可加更多版本.

zh.ts

export default {
    message: {
        Home: '首頁',
        About: '關於'
    }
}

en.ts

export default {
    message: {
        Home: 'HOME',
        About: 'ABOUT'
    }
}

 在locales目錄下建立index.ts 

import { createI18n } from 'vue-i18n' //引入vue-i18n組件
import zh from './zh'  // 中文語言包
import en from './en'  // 英文語言包

// 實例化I18n
const i18n = createI18n({
    locale: "zh", // 初始化配置語言
    messages: {
        zh,
        en
    }
})

export default i18n

在main.js中引入

import {createApp} from 'vue'
import router from './router/index'
import i18n from './locales/index'  // 引入
import App from './App.vue'

createApp(App)
    .use(router)
    .use(i18n)    //加載
    .mount('#app')

  這時候就已經可以在頁面中使用國際化了

{{$t(`message.Home`)}}

 設置中英文切換按鈕/事件

<div @click="change('zh')">中文</div>
<div @click="change('en')">English</div>

修改App.vue如下

 

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <a href="javascript:void(0)" @click="change('zh')">中文</a> -- 
  <a href="javascript:void(0)" @click="change('en')">English</a>
  <div>{{$t('message.Home')}}---{{$t('message.About')}}</div>
  <router-view />
</template>

<script lang="ts">
import { useI18n } from 'vue-i18n'

export default {
  name: 'App',
  setup() {
    const { locale } = useI18n()
    function change(type: string) {
      locale.value = type;
    }

    return { change }
  }
}
</script>