VueI18n的应用

时间:2024-01-21 15:52:21
.npm install vue-i18n
.在 main.js 中引入 vue-i18n
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
.在main.js中准备翻译
const messages = {
zh: {
message: {
name:'李四'
}
},
en: {
message: {
name:'lisi'
}
}
} .创建带有选项的 VueI18n 实例
const i18n = new VueI18n({
locale: localStorage.getItem("language"), // 语言标识
messages
}) .把 i18n 挂载到 vue 根实例上
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
i18n,
template: '<App/>',
components: {
App
} .在 HTML 模板中使用
<div id="app">
<h1 style="font-size: 16px; text-align: center;">{{ $t("message.hello") }}</h1>
</div>
}) .切换语言; this.$i18n.locale = "en";