使用 vue-i18n 切换中英文效果

使用 vue-i18n 切换中英文的过程需要遵循以下几个步骤：

第一步：安装 vue-i18n

在使用 vue-i18n 进行中英文切换前，需要在项目中安装 vue-i18n。可以使用 npm 等工具进行安装，具体的安装命令为：

npm install vue-i18n --save

第二步：添加语言文件

在 /src 目录下新建一个文件夹 i18n，然后在该文件夹中新建中英文语言文件，例如：

// 中文语言文件：zh-CN.js
export default {
  hello: '你好，世界！'
}

// 英文语言文件：en-US.js
export default {
  hello: 'Hello, world!'
}

这里需要注意，语言文件中的属性名需要与业务代码中使用的属性名一一对应。

第三步：配置 vue-i18n

在项目入口文件（main.js）中引入和配置 vue-i18n，例如：

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import zhCN from './i18n/zh-CN'
import enUS from './i18n/en-US'

// 引入 vue-i18n
Vue.use(VueI18n)

// 配置 i18n
const i18n = new VueI18n({
  locale: 'zh-CN', // 设置默认语言为中文
  messages: {
    'zh-CN': zhCN,
    'en-US': enUS
  }
})

new Vue({
  el: '#app',
  i18n, // 将 i18n 添加到 Vue 实例中
  render: h => h(App)
})

这样，vue-i18n 就已经配置好了。

第四步：使用 vue-i18n

在业务代码中使用 vue-i18n 进行中英文切换，例如：

<template>
  <div id="app">
    <h1>{{ $t('hello') }}</h1>
    <button @click="changeLocale">切换语言</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeLocale () {
      // 切换语言
      this.$i18n.locale = this.$i18n.locale === 'zh-CN' ? 'en-US' : 'zh-CN'
    }
  }
}
</script>

这里使用了 vue-i18n 提供的 $t 方法进行翻译，然后使用 this.$i18n.locale 切换语言。

示例一：标题切换

<template>
  <div v-html="$t('home.title')"></div>
  <button @click="changeLocale">切换语言</button>
</template>

<script>
export default {
  methods: {
    changeLocale () {
      this.$i18n.locale = this.$i18n.locale === 'zh-CN' ? 'en-US' : 'zh-CN'
    }
  }
}
</script>

// 中文语言文件：zh-CN.js
export default {
  home: {
    title: '<h2>欢迎来到我的站点！</h2>'
  }
}

// 英文语言文件：en-US.js
export default {
  home: {
    title: '<h2>Welcome to my website!</h2>'
  }
}

示例二：表格数据展示

<template>
  <table>
    <thead>
      <tr>
        <th>{{ $t('table.id') }}</th>
        <th>{{ $t('table.name') }}</th>
        <th>{{ $t('table.price') }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in list" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.price }}￥</td>
      </tr>
    </tbody>
  </table>
  <button @click="changeLocale">切换语言</button>
</template>

<script>
export default {
  data () {
    return {
      list: [
        { id: 1, name: '苹果', price: 5 },
        { id: 2, name: '香蕉', price: 3 },
        { id: 3, name: '橙子', price: 4 },
        { id: 4, name: '草莓', price: 6 },
        { id: 5, name: '葡萄', price: 8 }
      ]
    }
  },
  methods: {
    changeLocale () {
      this.$i18n.locale = this.$i18n.locale === 'zh-CN' ? 'en-US' : 'zh-CN'
    }
  }
}
</script>

// 中文语言文件：zh-CN.js
export default {
  table: {
    id: '编号',
    name: '名称',
    price: '价格'
  }
}

// 英文语言文件：en-US.js
export default {
  table: {
    id: 'ID',
    name: 'Name',
    price: 'Price'
  }
}

这里展示了如何使用 vue-i18n 将表格数据进行国际化的操作。