编辑排版 | 宋大狮

平台运营 | 小唐狮

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 -