vue项目支持语言切换

使用vue-i18n库来实现多语言支持
参考vue中使用i18n组件

1、安装

npm install vue-i18n

2、配置
在src目录下创建i18n.js文件:

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

Vue.use(VueI18n);

const messages = {
  en: {
    welcome: 'Welcome'
  },
  zh: {
    welcome: '欢迎'
  },
  zh_TW: {
    welcome: '歡迎'
  }
};

const i18n = new VueI18n({
  locale: 'zh_TW', // 默认语言
  fallbackLocale: 'en',
  messages
});

export default i18n;

3、在main.js中引入

import Vue from 'vue';
import App from './App.vue';
import i18n from './i18n';

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app');

4、组件中使用

<template>
  <div>{{ $t('welcome') }}</div>
</template>

<script>
export default {
  name: 'MyComponent'
};
</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值