vue3 + i18n

安装

npm install vue-i18n

yarn add vue-i18n

main.js

如果在一个模块系统中使用它，你必须通过 Vue.use() 明确地安装 vue-i18n：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from './router/index'
import i18n  from './lang/i18n'

const app = createApp(App)
app.use(ElementPlus)
app.use(router)
app.use(i18n)
app.mount('#app')

在src目录下创建lang文件夹，下包含ch.js(中文包) en.js(英文包) index.js i18n.js(配置i18n)

ch.js

export default{
    message: {
        username: '用户名',
        password: '密码',
        login: '登录',
        captcha: '验证码',
        forgetPassword: '忘记密码？',
        loginTip: '当前登录结果随机。验证码随便填',
        editpassword: '修改密码',
        logout: '退出登录',
        errMsg: {
            inputRequired: '请输入{cont}',
            selectRequired: '请选择{cont}'  
        }
    },
}

en.js

export default{
    message: {
        username: 'User Name',
        password: 'Password',
        login: 'Login',
        captcha: 'Captcha',
        forgetPassword: 'Forget Password?',
        loginTip: 'The login result is random. Just fill in the captcha',
        editpassword: 'Edit Password',
        logout: 'Logout',
        errMsg: {
            inputRequired: 'Please Input {cont}',
            selectRequired: 'Please Select {cont}'
        }
    },
}

index.js

import ch from './ch'
import en from './en'

export default {
   ch,
   en 
}; //将i18n暴露出去，在main.js中引入挂载

i18n.js

import { createI18n } from 'vue-i18n' //引入vue-i18n组件
import messages from './index'
const language = (
  (navigator.language ? navigator.language : navigator.userLanguage) || "ch"
).toLowerCase();
const i18n = createI18n({
  fallbackLocale: 'ch',//预设语言环境
  globalInjection:true,
  legacy: false, // you must specify 'legacy: false' option
  locale: language.split("-")[0] || "ch",//默认显示的语言 
  messages,//本地化的语言环境信息。
});

export default i18n

使用

{{ $t(`message.login`) }}

封装组件加入点击事件（js环境，不是typeScript环境）

配置element Plus

<template>
    <div>
        <el-dropdown>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item
                        v-for="item in languages "
                        :key="item.value"
                        :disabled="languages === item.value"
                    ><span @click="handSeletlanguages">{{item.name}}</span></el-dropdown-item>
                    
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script>
import { defineComponent, reactive, toRefs, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import $store from '../../store/index'
import { ElMessage } from 'element-plus'
export default defineComponent({
    setup() {
        const { locale } = useI18n()
        console.log('locale' , locale)
        const state = reactive({
            languages: [
                {
                    name: 'en',
                    value: 'en'
                },
                {
                    name: '中文',
                    value: 'ch'
                }
            ],
            handSeletlanguages: (lang) => {
                locale.value = lang
                $store.dispatch("setLang", lang)
                ElMessage({
                    message: 'Switch Language Success',
                    type: 'success'
                })
            }
        })

        const languages = computed(() => {
            return $store.state.languages
        })


        return {
            ...toRefs(state),
            languages
        }
    }
})
</script>

store.js

import { createStore } from 'vuex'


export default createStore({
    state: {
        language: ''
    },
    mutations: {
        setLang(state, language) {
            state.language = language
        }

    },
    actions: {
        setLang(context, value) {
            context.commit('setLang', value)
        }
    }
})

使用封装组件

<template>
    <div class="login-context">
            <div class="title-container">
                {{ $t(`message.login`) }}
                <langSelect></langSelect>
            </div>
    </div>
</template>
<script >
import { reactive, toRefs, defineComponent } from 'vue'
import langSelect from '../../components/lang/index.vue'

export default defineComponent({
    components: {
        langSelect
    },
})
</script>