vue3.0 实现国际化标准语言,中英文切换,超级简单~

编程入门 行业动态 更新时间:2024-10-10 01:23:41

vue3.0 实现国际化标准语言,<a href=https://www.elefans.com/category/jswz/34/1765392.html style=中英文切换,超级简单~"/>

vue3.0 实现国际化标准语言,中英文切换,超级简单~

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>

 

更多推荐

vue3.0 实现国际化标准语言,中英文切换,超级简单~

本文发布于:2024-03-12 07:25:19,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1730993.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:中英文   语言   简单   标准

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!