当前位置：首页 > news >正文

国际化不生效

news 来源：原创 2025/4/24 12:07:35

经过我的重重检查最终发现是版本问题。

原本下载默认next版本cnpm install vue-i18n@next

下载国际化插件

cnpm install vue-i18n@^9.14.3

删除掉node_models，再重新加载包：cnpm install 这时候就可以正常显示了

国际化操作：

en.js zh.js为这种格式的数据:

export default {login: {title: 'User Login',loginBtn: 'Login',usernameRule: 'Username is required',passwordRule: 'Password cannot be less than 6 digits',desc: `Test authority account:<br />Provide three kinds of authority accounts:<br />1. Super administrator account: super-admin <br />2. Administrator account: admin <br />3. Test configurable account: test <br />The uniform password is: 123456 <br /><br />Import user account:<br />You can log in with the imported username <br />The password is unified as: 123456 <br /><b>Note: Import user-discriminatory Chinese and English libraries! ! ! ! </b>`},route: {profile: 'Profile',chart: 'chart',user: 'user',excelImport: 'ExcelImport',userManage: 'EmployeeManage',userInfo: 'UserInfo',roleList: 'RoleList',permissionList: 'PermissionList',article: 'article',articleRanking: 'ArticleRanking',articleCreate: 'ArticleCreate',articleDetail: 'ArticleDetail',articleEditor: 'ArticleEditor'}
}

i18n/index.js

import { createI18n } from 'vue-i18n'
import mZhLocale from './lang/zh'
import mEnLocale from './lang/en'
import store from '@/store'const messages = {en: {msg: {...mEnLocale}},zh: {msg: {...mZhLocale}}
}/*** 返回当前 lang*/
function getLanguage () {return store && store.getters && store.getters.language
}
const i18n = createI18n({// 使用 Composition API 模式，则需要将其设置为falselegacy: false,// 全局注入 $t 函数globalInjection: true,locale: getLanguage(),messages
})export default i18n

再在main.js中挂载。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import installElementPlus from './plugins/element'
import './styles/index.scss'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import installIcons from './icons'
import './permission.js'
import i18n from './i18n'
const app = createApp(App)
installElementPlus(app)
// 导入svg图标
installIcons(app)
// 全局注册element图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
}
app.use(store).use(router).use(i18n).mount('#app')

组件中调用

<template>中

<p class="title">{{ $t('msg.theme.themeColorChange') }}</p>

<script>中

<script setup>
import { useI18n } from 'vue-i18n'
import { computed, effect } from 'vue'
import { useStore, defineProps } from 'vuex'
import { ElMessage } from 'element-plus'defineProps({effect: {type: String,default: 'dark',validator: function (value) {return ['dark', 'light'].indexOf(value) !== -1}}
})const store = useStore()
const language = computed(() => store.getters.language)
// 切换语言的方法
const i18n = useI18n()
const handleSetLanguage = (lang) => {// 切换i18n的localei18n.locale.value = lang// 修改vuex中保存的languagestore.commit('app/setLanguage', lang)// 提示ElMessage.success(i18n.t('msg.toast.switchLangSuccess'))
}
</script>