526互联

vue国际化步骤

发布时间 2023-04-20 10:29:29作者: 三号小玩家

vue国际化步骤

Vue 国际化的步骤如下所示：

1.安装 vue-i18n 库

npm install vue-i18n --save

2.创建 i18n 实例

在项目中新建一个 i18n.js 文件，引入 vue-i18n 库，并创建一个 i18n 实例。

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: 'zh', // 默认语言为中文
  messages: {
    zh: require('./locale/zh.json'), // 引入中文语言包
    en: require('./locale/en.json') // 引入英文语言包
  }
});

export default i18n;

其中，require 函数用于引入语言包文件，可以是 JSON 格式的数据，也可以是 .js 文件。在本示例中，我们将语言包文件存放在 locale 文件夹中，通过 require 函数引入

定义语言包

在 locale 文件夹中新建 zh.json 和 en.json 两个文件分别存放中文和英文的翻译信息，示例代码如下：

json
// zh.json
{
  "title": "欢迎来到我的网站",
  "content": "这里是我的个人博客"
}

// en.json
{
  "title": "Welcome to my website",
  "content": "This is my personal blog"
}

在 Vue 组件中可以使用 $t 函数来实现翻译。例如，我们在 App.vue 组件中给予以下代码：

<template>
  <div id="app">
    <h1>{{ $t('title') }}</h1>
    <p>{{ $t('content') }}</p>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

在上面的代码中，通过 $t 函数来获取对应语言包中的翻译，根据 i18n 实例中的 locale 属性的值来决定显示中文或英文。

切换语言

可以通过 i18n 实例的 $i18n.locale 属性来动态切换语言，示例代码如下：

this.$i18n.locale = 'en'; // 切换为英文

以上就是 Vue 国际化的基本步骤，当然还可以根据具体项目的需求进行更多的配置和自定义。