Vue国际化处理 vue-i18n 以及项目自动切换中英文

1.    环境搭建

命令进入项目目录,执行以下命令安装vue 国际化插件vue-i18n

Npm install vue-i18n --save

 

2.    项目增加国际化翻译文件

在项目的src/common/lang增加中文翻译文件(zh_CN.js)以及英文翻译文件(EN.js),里面分别存储项目中需要翻译的信息。

3.    项目引入

在项目的main.js中引入vue-i18n插件,引入对应的翻译文件(zh_CN.js/EN.js)引入并结合Element-UI 国际化。


上面有AppLanguage方法,可以传入 zh 或者 en,自动切换项目语言,可以在其他组件中直接调用。调用是直接写上  AppLanguage('zh');

4.    项目使用

在中文翻译文件zh_CN中引入Element-UI的中文脚本,在英文翻译文件EN中引入Element-UI的英文脚本,并且在文件中加入要翻译的内容,具体如下:

   Zh_CN.js:

 

EN.js:

 

然后在要翻译的地方进行翻译。

如果是element-ui 的,在要翻译的前面加上冒号

比如:label=“用户姓名” 就改成 :label=”$t(‘order.userName’)”

 

如果是html 显示的,就该用以下写法:


直接写成 {{$t(‘export’)}},就会直接去往翻译脚本里面自动匹配。

  • 4
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
你可以使用vue-i18n来实现Vue 3中的内容中英文切换。首先,你需要安装vue-i18n包。你可以使用以下命令来安装: ``` npm install vue-i18n ``` 然后,在你的Vue 3项目中,创建一个i18n.js文件,用于配置和管理国际化相关的内容。在这个文件中,你可以定义不同语言版本的文本和翻译。 ```javascript // i18n.js import { createI18n } from 'vue-i18n' // 定义语言版本和翻译内容 const messages = { en: { message: { hello: 'Hello, world!' } }, zh: { message: { hello: '你好,世界!' } } } // 创建i18n实例 const i18n = createI18n({ locale: 'en', // 默认语言版本 messages // 语言版本和翻译内容 }) export default i18n ``` 接下来,在你的组件中,你可以使用`useI18n`函数来获取i18n实例,并使用`$t`方法来获取翻译后的文本。 ```javascript // YourComponent.vue <template> <div> {{ $t('message.hello') }} </div> </template> <script> import { useI18n } from 'vue-i18n' export default { setup() { const { t } = useI18n() return { $t: t } } } </script> ``` 最后,你可以通过修改`locale`属性来切换不同的语言版本。 ```javascript // YourComponent.vue <script> import { useI18n } from 'vue-i18n' export default { setup() { const { t, locale } = useI18n() // 切换语言版本 const toggleLanguage = () => { locale.value = locale.value === 'en' ? 'zh' : 'en' } return { $t: t, toggleLanguage } } } </script> ``` 通过调用`toggleLanguage`方法,你可以在运行时切换组件中的内容的语言版本。 希望这可以帮助你实现Vue 3中的内容中英文切换

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值