Vue-i18n 是一个为 Vue.js 应用程序提供国际化的插件。以下是如何使用 Vue-i18n 的基本步骤和示例代码:
1.安装 Vue-i18n 插件:
npm install vue-i18n
2.挂载 main.js
import Vue from 'vue';
import App from './App';
import i18n from '@/assets/i18n';
import store from '@/store';
new Vue({
el: '#app',
router,
store,
i18n,
components: { App },
template: '<App/>'
});
3.assets/i8n的应用
import Vue from 'vue';
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
const messages = {
EN: {
message: {
hello: 'hello'
}
},
CN: {
message: {
hello: '你好'
}
}
};
const i18n = new VueI18n({
locale: 'EN', // 设置默认语言
messages, // 设置语言环境信息
});
export default i18n;
4.在 Vue 组件中使用 i18n:
<template>
<div id="app">
<p>{{ $t("message.hello") }}</p>
</div>
</template>