vue3 如何国际化

vue3项目如何国际化

• 我们已经属性vue2 ，使用i18n ，进行国际化
• 那vue3 我们如何配置 i18n 呢 ？

配置

Ⅰ、安装

npm i vue-i18n

Ⅱ、创建 il18n

• 在src目录下，创建 i18n 文件夹，并在下面分别创建三个文件 分别为 ：
• ① index.js => 主文件用于导入 i18n ，和相关配置
• ② zh.js => 存放中文内容
• ③ en.js => 存放英文内容

① index.js 示例 =>

import { createI18n } from 'vue-i18n';
import ZH from './zh.js';
import EN from './en.js';
const messages = {
  zh: { ...ZH  },
  en: { ...EN  },
};

const i18n = createI18n({
  legacy: false,
  globalInjection: true,
  locale: 'zh',
  messages
});
export default i18n;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

• locale属性用于设置初始语言， 值要和 messages 中的属性 key ，相互对应

② zh.js 示例 =>

export default {
  person: {
    name:'张三',
    hobby:'唱跳，rap，篮球'
  },
};
1
2
3
4
5
6

③ en.js 示例 =>

export default {
  person: {
    name:'zhangsan',
    hobby:'Singing and dancing, rap, basketball'
  },
};
1
2
3
4
5
6

Ⅲ、在main.js 中配置 i18n

import { createApp } from "vue";
import App from "./App.vue";
import i18n from './i18n/index';
const app = createApp(App);
app
    .use(i18n)
    .mount("#app");
1
2
3
4
5
6
7

使用

Ⅰ、在 html 中使用

• 如果只是在 html 中使用，不用在导入任何东西

<template>
  <div>
   <span> {{ $t("person.name") }} span> 
   <span> {{ $t("person.hobby") }} span>
  div>
template>
1
2
3
4
5
6

Ⅱ、在js 中使用

• 需要通过 导入 getCurrentInstance 进行获取

<script setup>
import { getCurrentInstance } from "vue";
const { $t } = getCurrentInstance().proxy;

console.log( $t("person.name") ); // => 获取值
script>
1
2
3
4
5
6

Ⅱ、修改语言 （和获取当前语言）

• 切换语言要导入vue-i18n 的 locale 属性，locale 是ref 对象，要修改value
• 不要修改 i18n/index.js文件, 导出的对象属性

<script setup>
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
// 切换中文
function  changeZh(){   locale.value = 'zh';   };
// 切换英文
function  changeEn(){   locale.value = 'en';   };
script>
1
2
3
4
5
6
7
8