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,封装了国际化切换组件,有需要的直接拿去用吧。

相关推荐
小曲曲30 分钟前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•2 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS3 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜4 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点4 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow4 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o4 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
刚刚好ā5 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
yqcoder6 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
会发光的猪。7 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js