Vue3.2+TS通过i18n实现国际化全流程,使用Vue3.2+TS+i18n来给大家实现一下项目的国际化,并且单独封装一个切换语种的组件,解决出现的bug

前端开发项目时,很多的时候都会用到国际化,今天我使用Vue3.2+TS+i18n来给大家实现一下项目的国际化,并且单独封装一个切换语种的组件,解决出现的bug,大家一步一步往下看。

1.安装i18n
js 复制代码
npm install vue-i18n --save
//我的版本是  "vue-i18n": "^9.2.2"
2.在src目录下,新建一个locales文件夹,此文件夹内新建一个index.ts文件,并写入如下内容
ts 复制代码
import { createI18n } from "vue-i18n";
import en from './language/en'
import zhCn from "./language/zhCn";

const i18n = createI18n({
  //这里是语种的持久化,刷新也存在
  locale:localStorage.getItem('language') || 'zhCn', // 默认是中文
  fallbackLocale: 'en', // 语言切换的时候是英文
  globalInjection:true,//全局配置
  legacy:false,//vue3写法
  messages:{en,zhCn}//本地message,也就是你需要做国际化的语种

})

export default i18n
3.这里大家可以看到,我把两种语言分别放到了不同的文件夹,所以这里大家需要在locales下新建一个language文件夹,并在下方新建en.ts和zhCn.ts文件,并分别写入如下内容
ts 复制代码
//en
export default {
  message: {
    hello: 'hello world',
    language:'language'
  }
}

//zh
export default {
  message: {
    hello: '你好,世界',
    language:'语言'
  }
}
4.都完成后需要在main.ts中注册,另外,本次我本次使用的ui框架是字节的ArcoDesign,大家使用其他的element或者antdesign也可以,都不影响。
ts 复制代码
import { createApp } from 'vue'
import './style.css'
import i18n from './locales' //这里
import ArcoVue from '@arco-design/web-vue';
import '@arco-design/web-vue/dist/arco.css';
import ArcoVueIcon from '@arco-design/web-vue/es/icon';

import App from './App.vue'

const app = createApp(App)
app.use(i18n)//这里
app.use(ArcoVue);
app.use(ArcoVueIcon);
app.mount('#app')
5.我们封装一个组件来切换语种
ts 复制代码
<template>
    <a-dropdown @select="handleSelect" :popup-max-height="false">
      <a-button>{{curLanguage == 'zhCn' ? '中文': 'Endlish'}}<icon-down/></a-button>
      <template #content>
        <a-doption :value="'zhCn'" :disabled="curLanguage == 'zhCn'">中文</a-doption>
        <a-doption :value="'en'" :disabled="curLanguage == 'en'">Endlish</a-doption>
      </template>
    </a-dropdown>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { Message } from '@arco-design/web-vue';
import { computed } from "vue";

const i18n = useI18n()
//储存语种并进行切换
const handleSelect = (v:any) => {
  localStorage.setItem('language',v)
  i18n.locale.value = v
  Message.success({
    content:v=='zhCn'?'当前语种为中文':'The current language is English',
    duration: 2000
  })
};

// 计算当前语种
const curLanguage = computed(()=>{
  return i18n.locale.value
})

</script>
<style scoped lang="less">
.arco-btn{
  position: absolute;
  right: 10px;
  top: 5px;
}
.arco-dropdown-open .arco-icon-down {
  transform: rotate(180deg);
}
</style>
6.使用,直接通过调用{{ $t("message.hello") }}
ts 复制代码
<template>
  <div>
    {{ $t("message.hello") }}
    <ChangeLan></ChangeLan>
  </div>
</template>

<script setup lang="ts">
import ChangeLan from './components/tabLang.vue'

</script>
<style scoped lang="less">
ul {
  list-style-type: none;
  li {
    height: 30px;
    line-height: 30px;
    background-color: aqua;
    margin-bottom: 10px;
  }
}
</style>
那我们在vite.config.ts里面添加如下代码即可
ts 复制代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js' // 加入这行
    }
  }
})
8.假如我们的语种比较多,那么如果我们要新增语种,就需要全部改一下这样就很不方便,那么我们直接封装一个语言的映射文件,在locales文件夹下,新增一个langMap.ts文件,写入如下内容
ts 复制代码
// 语言映射,通过Map的key和value来控制语言的切换,也就是键值对控制
export default  {
  langMap:new Map([
    ['en','English'],
    ['zhCn','中文'],
    ['ja','わご'],//这里就是我新添加的语种
  ])
}
9.我们的组件现在也需要进行变化
ts 复制代码
<template>
  <a-dropdown @select="handleSelect" :popup-max-height="false">
    <!-- 这里就是通过他的key,或者他的值 -->
    <a-button>{{langMap.langMap.get(curLanguage)}}<icon-down/>
    </a-button>
    <template #content>
      <!-- langMap.langMap.entries() 返回一个新的迭代器对象 比如  ['en','English'] -->
      <!-- 第一个是他的key 可以写成item[0],第二个是他的值 item[1] -->
      <a-doption
        v-for="item in langMap.langMap.entries()"
        :key="item[0]"
        :value="item[0]"
        :disabled="curLanguage == item[0]"
        >{{ item[1] }}</a-doption>
    </template>
  </a-dropdown>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { Message } from "@arco-design/web-vue";
import { computed } from "vue";
import langMap from "../locales/langMap";

const i18n = useI18n();

const handleSelect = (v: any) => {
  localStorage.setItem("language", v);
  i18n.locale.value = v;
  Message.success({
    content: `${langMap.langMap.get(v)}`,
    duration: 2000,
  });
};

const curLanguage = computed(() => {
  return i18n.locale.value;
});


</script>
<style scoped lang="less">
.arco-btn {
  position: absolute;
  right: 10px;
  top: 5px;
}
.arco-dropdown-open .arco-icon-down {
  transform: rotate(180deg);
}
</style>

至此,Vue3.2+TS+Vite的国际化实现,并且解决了部分bug,封装了国际化切换组件,有需要的直接拿去用吧。

相关推荐
熊的猫1 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
mosen8682 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
别拿曾经看以后~3 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
川石课堂软件测试3 小时前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
JerryXZR3 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
problc3 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter
Gavin_9153 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼4 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
待磨的钝刨5 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
Devil枫9 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试