vue3.0 实现国际化标准语言,中英文切换,超级简单~
1.先安装npm install vue-i18n2.src下面新建一个language 文件下面新建一个 index.jsimport { createI18n } from 'vue-i18n'export default createI18n({legacy: false, // 让 setup 函数可以通过 t 访问globalInjection: true, // 让 template
·
1.先安装
npm install vue-i18n
2.src下面新建一个 language 文件下面新建一个 index.js
import { createI18n } from 'vue-i18n'
export default createI18n({
legacy: false, // 让 setup 函数可以通过 t 访问
globalInjection: true, // 让 template 可以像 vue2 那样使用 $t 来访问
locale: 'zh-cn' ,
fallbackLocale: 'zh-cn', //切换 zh-cn en-us 控制展示文字
messages: {
'zh-cn': {
index: {
title: '你好,vue-i18n'
}
},
'en-us': {
index: {
title: 'Hello, Vue-i18n'
}
}
}
})
3.在main.js 引入
import i18n from '@/language/'
createApp(App).use(i18n)
4. 打开一个页面写入内容
<template>
<div class="home" >
<h2>访问方式1:{{ title }}</h2>
<h2>访问方式2:{{ $t('index.title') }}</h2>
</div>
</template>
<script>
import {useI18n} from 'vue-i18n'
export default {
name: 'vueIndex',
setup() {
const {t} = useI18n()
const title = t('index.title')
return {
title,
}
}
}
</script>
更多推荐
已为社区贡献10条内容
所有评论(0)