vue2+elemnet 国际化_vue2国际版-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_47247635/article/details/131723277

文章介绍了如何在Vue项目中安装和配置vue-i18n进行国际化支持，包括创建lang文件夹，定义en.js和zh.js，设置默认语言，以及在main.js中引入和设置i18n实例，实现页面语言切换功能。

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

安装国际化组件 vue-i18n

npm i vue-i18n 或者 yarn install vue-i18n

在src 目录下创建lang 文件夹里面有en.js、zh.js、index.js

en.js

export defuat {
    翻译: translate
}

zh.js

export default { 
    翻译: 翻译
}

index.js

import Vue from "vue";
import VueI18n from "vue-i18n";
/* 引入语言 */
import en from "element-ui/lib/locale/lang/en";
import zh from "element-ui/lib/locale/lang/zh-CN";
import localZh from "@/lang/zh";
import localEn from "@/lang/en";
let lang = navigator.language || navigator.userLanguage;
if (localStorage.getItem("lang")) {
  lang = localStorage.getItem("lang");
}
let locale = zh;
if (lang === "zh-CN") {
  locale = zh;
} else if (lang === "en-US") {
  locale = en;
}
Vue.use(VueI18n);
// set ElementUI lang
// Vue.use(ElementUI, { locale });
localStorage.setItem("lang", lang);
const i18n = new VueI18n({
  locale: lang,
  messages: {
    "zh-CN": localZh,
    "en-US": localEn,
  },
});
export { i18n, locale, lang };


export default new Vue({
  i18n,
});// 为了方便在js 页面使用 ，在js引用import i18n form "@/lang" 使用 i18n.$t("翻译")

页面语言切换

main.js 需要引入的方法

import { i18n, locale } from "@/lang/index";
Vue.use(ElementUI, { locale });
new Vue({
  el: "#app",
  router,
  i18n,
  store,
  render: (h) => h(App),
});