vite+vue3多语言使用

安装vue-i18n

npm install vue-i18n@next

在src目录下建立lang文件夹，并在文件下面创建zh.ts、en.ts文件（中文、英文), 自行拓展其他语言

zh.ts 文件

export default {
    message: {
        Home: '首页',
        About: '关于'
    }
}

en.ts 文件

复制代码

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

在locales目录下建立index.ts

//引入vue-i18n组件
import { createI18n } from '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')

在视图中（.vue页面）使用$t 转换需要多语言的文字即可

<div @click="change('zh')">中文</div>
<div @click="change('en')">English</div>
<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>