前端怎么在vue项目中做国际化语言切换?

1. 安装 vue-i18n

npm install vue-i18n

   2.在 main.js 中全局注册 vue-i18n

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

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'zh-CN',
  messages: {
    'zh-CN': require('./locale/zh-CN'),
    'en-US': require('./locale/en-US')
  }
})

new Vue({
  i18n,
  ...
})

3.在项目中使用

<template>
  <div>
    {{ $t('message.hello') }}
  </div>
</template>

在 locale 目录中定义不同语言的翻译文件，比如：

// ./locale/zh-CN.js
export default {
  message: {
    hello: '你好'
  }
}

// ./locale/en-US.js
export default {
  message: {
    hello: 'Hello'
  }
}

4.切换语言

this.$i18n.locale = 'en-US'

通过修改 i18n 实例的 locale 属性，可以切换语言。

这是一个简单的例子，更多细节请参考 vue-i18n 的官方文档。