vue问题：如何敲简单的使用vue-i18n实现多语言切换？

编辑排版 | 宋大狮

平台运营 | 小唐狮

ONE 问题描述

2023年2月10号记，久违了大家。

今天要和大家分享的是关于web端国际化多语言的问题。

最近这段时间，时不时的接触国际化的项目，于是想借此机会，把有关vue-i18n多语言相关的内容梳理一下。

问题：用vue-i18n实现多语言切换。举例用主流web端技术vue3，vue2可以此为参考。

TWO 问题解决

一、安装

1、npm命令

npm install vue-i18n@next

2、yarn命令

yarn add vue-i18n@next

二、配置【重点】

1、创建文件

在目录src下，创建lang文件夹，并新建index.js、和翻译的内容文件

2、编写index.js

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

const app = createApp(App)
const i18n = createI18n({
  legacy: false, 
  locale: "zh", // 初始化显示中文
  messages: {en,zh} // 这里就是你有几种语言，对象里面就有几个
})

export default function (app) {
  app.use(i18n)
}

3、编写zh.js

const zh = {
    home: {
        Home: '首页', // 语言变量: 中文字符
    },
}
export default zh

4、编写en.js

const en = {
    home: {
        Home: 'Home', // 语言变量: 英语字符
    },
}
export default en

5、编写main.js

import i18n from './lang/index'

const app = createApp(App)

app.use(i18n)
app.mount('#app')

三：使用

1、template中

<div class="text">
  {
   
   { $t("home.Home") }}
</div>

2、script中

引入：

import { useI18n } from "vue-i18n";

const { t } = useI18n();

一般使用：

ElMessage({
        message: t("home.Home"),
        type: "success",
      });

特殊使用：

// 多语言不生效时，请借用计算属性
const userTypeList = computed(() => { 
  const rules = [
    {
      value: "1",
      label: t("home.Home"),
    }
  ];
  return rules;
});

四：语种切换

<el-button type="primary" @click="changeLang('en')">英文</el-button>

import { useI18n } from "vue-i18n";
const { locale } = useI18n();

const changeLang = (val) => {
  locale.value = val;
  localStorage.setItem("lang", val);
｝

- END -

vue问题：如何敲简单的使用vue-i18n实现多语言切换？

猜你喜欢