VUE2国际化_vue2配置国际化-优快云博客

本文介绍了如何在Vue 3项目中安装和使用vue-i18n插件，包括设置多语言文件、配置i18n实例、并演示了如何在应用中切换语言。重点讲解了在src结构、en.js和zh.js文件的管理以及在main.js中引入和使用i18n的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，安装vue-i18n插件,9版本以上vue3用的

npm install vue-i18n@8 --save

2，src目录，新建lang文件夹

en.js

export default {
    test: {
        login: "login"
    }
}

zh.js

export default {
    test: {
        login: "登录"
    }
}

index.js

import Vue from 'vue';
import VueI18n from 'vue-i18n'
import elementuiEn from "element-ui/lib/locale/lang/en";
import elementuiZh from "element-ui/lib/locale/lang/zh-CN";
import en from './en'
import zh from './zh'

Vue.use(VueI18n);

const messages = {
    en: Object.assign(en, elementuiEn),
    zh: { ...zh, ...elementuiZh }
}

localStorage.setItem('locale', 'zh')
const i18n = new VueI18n({
    locale: localStorage.getItem('locale') || "zh",
    messages
})


export default i18n;

3，最后在main.js引入

import i18n from './lang/index.js'

Vue.use(ElementUI);

new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#child1')

4，如果需要切换中文需要用到locale

import ElementLocale from 'element-ui/lib/locale'
ElementLocale.i18n((key, value) => i18n.t(key, value))
//切换的时候改变this.$i18n.locale的值即可
this.$i18n.locale = localStorage.getItem('locale')