vite项目使用i18n

发表于 | 更新于: | 分类于 |

Vue3 Vite使用i18n配置国际化，就是根据它的规则自己建立一套语言字典，对于每一个字都有统一的标识，我们在文中使用该标识代替某一语言，然后它内部就会自动转为你需要查看的语言

下载安装

NPM

1
npm install vue-i18n@next
准备语言文件
  • src/i18n/zh-CN.js
1
2
3
4
5
6
7
8
9
10
const zh_CN = {}

zh_CN.nav = {}
zh_CN.nav.title='博客管理系统'
zh_CN.nav.chi='简体中文'
zh_CN.nav.eng='英语'
zh_CN.nav.personalCenter='个人中心'
zh_CN.nav.logout='退出登录'

export default zh_CN
  • src/i18n/en-US.js
1
2
3
4
5
6
7
8
9
10
const en_US = {}

en_US.nav = {}
en_US.nav.title='Blog management system'
en_US.nav.chi='CN'
en_US.nav.eng='EN'
en_US.nav.personalCenter='Personal Center'
en_US.nav.logout='Sign Out'

export default en_US
配置文件
  • src/i18n/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { createI18n } from 'vue-i18n'

// 导入自定义国际化文件
import zh_CN from './zh-CN'
import en_US from './en-US'

const i18n = createI18n({
  legacy: false,
  locale: 'zh_CN',  // 默认语言
  globalInjection: true,  // 全局注册 $t 方法
  messages: {
  	zh_CN: zh_CN,
    en_US: en_US
  },
})

export default (app)=> {
  app.use(i18n)
}
全局配置
  • src/main.js
1
2
3
4
5
6
7
8
9
// 在main.js中引入
import { createApp} from 'vue'
import App from './App.vue'
import installi18n from './i18n/index'

const app = createApp(App)
installi18n(app)

app.mount('#app')
Template
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<template>
    <div class="header">
        <!-- 折叠按钮 -->
        <div class="collapse-btn" @click="collapseChage">
            <el-icon v-if="!collapse"><Fold /></el-icon>
            <el-icon v-else><Expand /></el-icon>
        </div>
        <div class="logo">{{ $t("nav.title") }}</div>
        <div class="header-right">
            <div class="header-user-con">
                <el-radio-group v-model="langToggle" 
                                size="small" 
                                @change="changeLanguage"
                                style="margin-left: 15px;">
                    <el-radio-button :label="chi">{{$t("nav.chi")}}</el-radio-button>
                    <el-radio-button :label="eng">{{$t("nav.eng")}}</el-radio-button>
                </el-radio-group>

                <el-dropdown class="user-name" trigger="click" @command="handleCommand">
                    <span class="el-dropdown-link" style="font-weight:bold;">
                        {{username}}
                        <el-icon class="el-icon-caret"><caret-bottom class="el-icon-caret-ic"/></el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="user">{{ $t("nav.personalCenter")}}</el-dropdown-item>
                            <el-dropdown-item divided command="loginout">{{ $t("nav.logout") }}</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>
    </div>
</template>
<script>
import { computed, onMounted, ref } from "vue";
import { useI18n } from 'vue-i18n';

export default {
    setup() {

        // vue-i18n提供了一个狗子函数，userI18n()，暴露出locale属性用于切换语言
        const { locale } = useI18n()
        console.log(localStorage.getItem("locale") || 'zh_CN')
        // 要切换的语言
        locale.value = localStorage.getItem("locale") || 'zh_CN'
        const chi = useI18n().t('nav.chi')
        const eng = useI18n().t('nav.eng')
        let myLocale = useI18n().locale.value
        console.log(chi, eng, myLocale)

        // 切换按钮选中的值
        const langToggle = myLocale === 'zh_CN' ? ref(chi) : ref(eng)
        console.log(langToggle.value)
        
        function changeLanguage(e) {
            if (e == chi) {
                myLocale = 'zh_CN'
                locale.value = 'zh_CN'
            } else if(e == eng) {
                myLocale = 'en_US'
                locale.value = 'en_US'
            }
            localStorage.setItem('locale', myLocale)
        }

        // 定义方法集合，整体return出去
        let methods = {
            changeLanguage,
        }

        return {
            langToggle,
            chi,
            eng,
            ...methods
        };
    },
};
</script>
Element Plus组件国际化
全局配置

参考官方文档 https://element-plus.gitee.io/zh-CN/guide/i18n.html#configprovider

  • src/plugins/element.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import localeZH from 'element-plus/lib/locale/lang/zh-cn'
import localeEN from 'element-plus/lib/locale/lang/en'
import * as ElIconModules from '@element-plus/icons-vue'

export default (app) => {
  Object.keys(ElIconModules).forEach(function (key) {
    app.component(ElIconModules[key].name, ElIconModules[key])
  })
  app.use(ElementPlus, {
    // 全局配置，判断当前localStorage的值并初始化
    locale: localStorage.getItem("locale") === 'zh_CN' ? localeZH : localeEN
  })
}
ConfigProvider

Element Plus 还提供了一个 Vue 组件 ConfigProvider 用于全局配置国际化的设置

1
2
3
4
5
6
7
<el-config-provider :locale="eLocale">
    <el-container>
        <div class="demo-color-block">
        	<el-color-picker v-model="color1" />
        </div>
    </el-container>
</el-config-provider>
  • script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<script>
import { computed, onMounted, ref } from "vue";
import { useI18n } from 'vue-i18n';

import localeZH from 'element-plus/lib/locale/lang/zh-cn'
import localeEN from 'element-plus/lib/locale/lang/en'

export default {
    setup() {

        // 自定义国际化
        // vue-i18n提供了一个狗子函数，userI18n()，暴露出locale属性用于切换语言
        const { locale } = useI18n()
        console.log(localStorage.getItem("locale") || 'zh_CN')
        // 要切换的语言
        locale.value = localStorage.getItem("locale") || 'zh_CN'
        const chi = useI18n().t('nav.chi')
        const eng = useI18n().t('nav.eng')
        let myLocale = useI18n().locale.value
        console.log(chi, eng, myLocale)

        // Element Plus 组件国际化
        const eLocale_zh = ref(localeZH)
        const eLocale_en = ref(localeEN)
        let eLocale = localStorage.getItem("locale") === "zh_CN" ? eLocale_zh : eLocale_en


        // 切换按钮选中的值
        const langToggle = myLocale === 'zh_CN' ? ref(chi) : ref(eng)
        console.log(langToggle.value)
        
        function changeLanguage(e) {
            if (e == chi) {
                myLocale = 'zh_CN'
                locale.value = 'zh_CN'

                // 组件国际化
                const temp = eLocale_zh.value
                eLocale_zh.value = eLocale_en.value
                eLocale_en.value = temp

            } else if(e == eng) {
                myLocale = 'en_US'
                locale.value = 'en_US'

                // 组件国际化
                const temp = eLocale_en.value
                eLocale_en.value = eLocale_en.value
                eLocale_zh.value = temp
            }
            localStorage.setItem('locale', myLocale)
        }

        const color1 = ref('#409EFF')
        
        return {
            color1,
            eLocale
        };
    },
};
</script>

到此结束，欢迎大神点评，指出不足指出！！

坚持原创技术分享，您的支持将鼓励我继续创作！