Vue有哪些脚手架可以实现多语言和国际化？

想利用Vue框架实现项目多语言和国际化功能？下面web建站小编给大家简单介绍一下实现方法！

安装脚手架

npm install vue-i18n --save

配置Vue-i18n

//创建一个i18n文件夹，新建index.js
import Vue from 'vue';
import VueI18n from 'vue-i18n';
 
Vue.use(VueI18n);
 
const i18n = new VueI18n({
  locale: 'en', // 默认使用英文
  messages: {
    en: require('./en.json'),
    zh: require('./zh.json'),
  },
});
 
export default i18n;

i18n文件夹中创建en.json和zh.json文件

//en.json
{
  "hello": "Hello",
  "world": "World",
  "welcome": "Welcome"
}

//zh.json
{
  "hello": "你好",
  "world": "世界",
  "welcome": "欢迎"
}

使用Vue-i18n

<template>
  <div>
    <p>{{ $t('hello') }}</p>
    <p>{{ $tc('world', 1) }}</p>
    <p>{{ greeting }}</p>
  </div>
</template>
 
<script>
import i18n from '@/i18n';
 
export default {
  computed: {
    greeting() {
      return this.$t('welcome', { name: 'Vue' });
    },
  },
  created() {
    // 设置语言为中文
    i18n.locale = 'zh';
  },
};
</script>

除了上面的方法之外，还可以利用Vue CLI提供了官方插件vue-cli-plugin-i18n，可以快速集成多语言和国际化。