使用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>