vite + element-plus + vue3实现网站国际化 (Not available in legacy mode (at message-compiler.esm-bundler....

有时候我们的网站需要做国际化的语言切换,今天试着做了一下
首先我们要分成两部分

element-plus 的国际化

element-plus因为他的文本啥的都是封装在内部的,我们无法去更改,比如说date-picker,所以就要使用组件库本身提供的国际化组件,当然element-plus也提供了配置的形式,

import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

app.use(ElementPlus, {
  locale: zhCn,
})

但是这样貌似不好做语言的切换,所以我就用组件的形式了

  • 首先导入语言包
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import en from "element-plus/lib/locale/lang/en";

使用组件 App.vue


    

实现changeLanguage

import { ref } from "vue";
const locale = ref(zhCn);
const changeLanguage = (language: any) => {
  locale.value = language;
};

这样我们在点击中文,英文按钮的时候,就会发现element-plus的组件文字就可以相互切换了(element-plus支持的语言列表)

网站中自己的文本

网页中我们自己的文字要做语言的切换的话就需要依赖vue的一个插件了: vue-i18n (是数字1不是字母l, 没错,小丑就是我)

安装

npm i vue-i18n@next

src下创建一个language文件夹

src
   |-- language
       | -- i18n.ts
       | -- en.ts
       | -- zh.ts

i18n.ts

import { createI18n } from 'vue-i18n'
import zh from './zh'
import en from './en'

const i18n = createI18n({
  legacy: false,
  locale: 'zh',
  messages: {
    zh,
    en
  }
})

export default i18n

注意: 在这里需要配置 legacy: false,不然会报错:Not available in legacy mode (at message-compiler.esm-bundler.js:54:19)

en.tszh.ts里面就是配置我们对应的中文和英文对应的文本啦

en.ts

export default {
  message: {
    home: 'home',
    mine: 'mine'
  }
}

zh.ts

export default {
  message: {
    home: '首页',
    mine: '我的'
  }
}

因为 vue-i18n是一个插件嘛,所以要注册一哈
main.ts

import i18n from './language/i18n'
...

const app = createApp(App)
...
app.use(i18n)
app.mount('#app')

下面就可以去使用了

  • 在 App.vue 中配置语言切换时 vue-i18n 的语言切换
    在上面的element-plus国际化配置基础上
import { useI18n } from "vue-i18n";

const { locale: localeLanguage } = useI18n();

const changeLanguage = (language: any) => {
  locale.value = language;
  localeLanguage.value = language.name; // 在language参数中有一个name属性,值就是 zh-cn 或者 en, 这样就可以修改 vue-i18n中的语言属性了
};
  • 配置了语言的切换后就要去使用了

随便找个页面了




useI18n函数中解构出一个 t 函数,通过这个t函数就可以渲染我们的文本了,他需要一个字符串参数,这个字符串不难看出就是在 en.tszh.ts中导入的对象中的message属性中获取相关的文本
当然名字不一定message,这个名字就是任意的,而且也可以有多个对象,比如

export default {
  header: {},
  footer: {},
  message: {}
  ...
}

总结:本文只是对 vue-i18n 的基本使用,毕竟目的达到啦,更多Api大家可以去官网查阅vue-i18n ,还有一点使用这种国际化的方式的话,应当在项目启动时就明确要不要做国际化,不然开发完成后期要改的话就很烦

你可能感兴趣的:(vite + element-plus + vue3实现网站国际化 (Not available in legacy mode (at message-compiler.esm-bundler....)