vue3中多语言切换vue-i18n

最新推荐文章于 2024-02-26 11:29:30 发布

前端小趴菜05

最新推荐文章于 2024-02-26 11:29:30 发布

阅读量877

点赞数 10

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_68716504/article/details/135863000

版权

本文介绍了如何在Vue.js项目中使用vue-i18n库进行国际化设置，包括创建i18n文件夹，配置语言文件，引入并使用i18n在main.ts和组件中，以及如何通过el-select实现语言的动态切换。

摘要由CSDN通过智能技术生成

安装

npm install vue-i18n@next

使用

一.在src中创建i18n文件夹（文件名无所谓）

在i18n下创建 en.ts/js zh.ts/js index.ts/js 分别写入下面代码

en.ts/js

//en
export default {
  message: {
    hello: 'hello',
    name:'name'
  }
}

zh.ts/js

//zh
export default {
  message: {
    hello: '你好',
    name:'姓名'
  }
}

index.ts/js

//index.ts
import { createI18n } from "vue-i18n";
import en from './en'
import zh from './zh';
 
const i18n = createI18n({
  locale:localStorage.getItem('language') || 'zh', // 默认是中文
//   fallbackLocale: 'en', // 语言切换的时候是英文
  globalInjection:true,//全局配置$t
  legacy:false,//vue3写法
  messages:{en,zh}// 需要做国际化的语种,就是刚才编写的两个语言
 
})
 
export default i18n

二.在main.ts进行引入注意看路径

main.ts/js

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index'
import i18n from './i18n/index' //引入配置的语言

const app = createApp(App)
app.use(router)
app.use(i18n)    //挂载
app.mount('#app')

三.页面使用

<template>
  <div>
    <el-select v-model="value" placeholder="选择语种" @change="handleChange" style="width: 100px">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
    <div>
      {{ $t("message.name") }}
      {{ $t("message.hello") }}
    </div>
  </div>
</template>
 
<script setup lang="ts">
import { ref } from "vue";
import { useI18n } from "vue-i18n";
const { locale } = useI18n()
const value = ref('zh')  //选中的语种 默认中文
const options = [
  {
    value: 'zh',
    label: '中文',
  },
  {
    value: 'en',
    label: '英文',
  },
]
//点击切换 储存语种并进行切换
const handleChange = (value: string) => {
  localStorage.setItem('language', value)
  locale.value = value
}
</script>
<style scoped lang="less"></style>

以上操作即可实现