vue项目实现中英文切换

2021/12/5 6:20:44

编程Tag： vue 切换 TS i18n 中英文 zh Language

本文主要是介绍vue项目实现中英文切换，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

转载自：https://www.cnblogs.com/fczbk/p/14468037.html

1、首先安装插件vue-i18n

1	`npm install vue-i18n --save-dev`

2、创建文件

en.ts 文件内容

1 2 3 4 5 6 7 8 module.exports = { language: { name: '英文', }, about: { title: 'I am English', }, };

zh.ts 文件内容

1 2 3 4 5 6 7 8 module.exports = { language: { name: '中文', }, about: { title: '我是中文', }, };

index.ts

1 2 3 4 5 6 7 8 9 10 11 12 13 14 // 中英文切换 import Vue from 'vue'; import VueI18n from 'vue-i18n'; Vue.use(VueI18n); const i18n = new VueI18n({ locale: localStorage.getItem('languageStorage') || 'zh', messages: { 'zh': require('./zh'), 'en': require('./en'), }, }); export default i18n;

3、在 mian.ts 引入i18n

1 2 3 4 5 6 7 8 import i18n from './components/language/index'; new Vue({ router, store, i18n, render: (h) => h(App), }).$mount('#app');

DEMO

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <template> <div class="about"> {{ language }} <el-button-group> <el-button @click="setLanguage('zh')">中文</el-button> <el-button @click="setLanguage('en')">英文</el-button> </el-button-group> <h1>{{ $t('about.title') }}</h1> </div> </template> <script lang="ts"> import { Component, Vue } from 'vue-property-decorator'; @Component export default class About extends Vue { public language: string = localStorage.getItem('languageStorage') || 'zh'; private setLanguage(val: string) { localStorage.setItem('languageStorage', val); this.language = val; this.$i18n.locale = val; } } </script>

这篇关于vue项目实现中英文切换的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

vue项目实现中英文切换

相关编程文章