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，可以快速集成多语言和国际化。

Motion for Vue：一个轻量级且功能强大的Vue3动画库

el-table合并行的通用方法（附js代码）

vue前端分页功能实现代码（附js代码）

el-table利用:row-style="rowClass"设置指定行变色

一款免费开源效果酷炫​的 Vue / React 大屏数据展示组件库——DataV 

标签： vue-cli-plugin-i18n, vue-i18n, Vue国际化, Vue多语言, Vue官方插件

上面是“Vue有哪些脚手架可以实现多语言和国际化？”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_5094.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！