vue2实现全局中英文切换
时间: 2023-09-10 22:16:04 浏览: 174
vue 使用vue-i18n做全局中英文切换的方法
5星 · 资源好评率100%
要实现全局中英文切换,你可以使用Vue的国际化插件vue-i18n。下面是一个简单的实现步骤:
1. 安装vue-i18n插件:
```
npm install vue-i18n --save
```
2. 在Vue项目的入口文件中引入vue-i18n并配置:
```javascript
import Vue from 'vue';
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
const i18n = new VueI18n({
locale: 'zh', // 默认语言为中文
messages: {
zh: require('./locales/zh.json'), // 中文语言包
en: require('./locales/en.json'), // 英文语言包
},
});
new Vue({
i18n,
// ...其他配置
}).$mount('#app');
```
3. 创建语言包文件:
在项目根目录下创建一个`locales`文件夹,并在该文件夹下创建`zh.json`和`en.json`两个文件,分别存放中文和英文的翻译内容。示例内容如下:
`zh.json`:
```json
{
"hello": "你好",
"welcome": "欢迎使用"
}
```
`en.json`:
```json
{
"hello": "Hello",
"welcome": "Welcome"
}
```
4. 在Vue组件中使用翻译内容:
在需要翻译的地方使用`$t`方法来获取对应的翻译内容。示例代码如下:
```html
<template>
<div>
<p>{{ $t('hello') }}</p>
<p>{{ $t('welcome') }}</p>
</div>
</template>
```
注意:在组件中使用`$t`方法需要先在Vue组件中引入`VueI18n`插件。
5. 切换语言:
在你的应用中,你可以提供一个切换语言的按钮或者其他交互方式来改变当前的语言设置。你可以通过修改`i18n`实例的`locale`属性来实现切换。示例代码如下:
```javascript
// 切换为英文
this.$i18n.locale = 'en';
```
当切换语言后,页面上使用`$t`方法获取的文本内容将会自动刷新为对应语言的翻译。
这样,你就可以实现全局中英文切换了。记得在需要翻译的地方使用`$t`方法获取翻译内容,并提供切换语言的交互方式。
阅读全文