正文
[Vue]使用 vue-i18n 切换中英文
小程序:扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序
【扫一扫了解最新限行尾号】
复制小程序
1、引入 vue-i18n
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import merge from 'lodash/merge'
2.准备本地的文言信息
const messages = {
zh: {
message: {
hello: '好好学习,天天向上!'
}
},
en: {
message: {
hello: 'good good study, day day up!'
}
}
}
3、创建带有选项的 VueI18n 实例
const i18n = new VueI18n({
locale: 'zh',
messages,
})export default i18n
4、把 i18n 挂载到 vue 根实例上
import i18n from '@i18n'new Vue({
router,
store,
i18n,
render: h => h(App),
}).$mount('#app')
<div id="app">
<p>{{ foo }}</p>
<!-- 这里的 `foo` 不会更新! -->
<button v-on:click="foo = 'baz'">Change it</button>
</div>
5、在模板中使用
<div id="app">
<h1 style="font-size: 16px; text-align: center;">{{ $t("message.hello") }}</h1>
</div>