前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue国际化配置

vue国际化配置

作者头像
李维亮
发布2022-11-16 18:45:53
2850
发布2022-11-16 18:45:53
举报
文章被收录于专栏:李维亮的博客李维亮的博客

首先安装vue-i18n

新建locales/i18n.js文件

代码语言:javascript
复制
/**
 * Created by liweiliang 406320591@QQ.com on 2022/10/14 15:16.
 */
import Vue from "vue";
import VueI18n from "vue-i18n";
import elementZhLocale from "element-ui/lib/locale/lang/zh-CN"; // element-ui lang
import elementEnLocale from "element-ui/lib/locale/lang/en"; // element-ui lang
import enLocale from "./lang/enLocale";
import zhLocale from "./lang/zhLocale";

const messages = {
  en: {
    ...enLocale,
    ...elementEnLocale,
  },
  zh: {
    ...zhLocale,
    ...elementZhLocale,
  },
};

/**
 * i18n 配置
 * @param locale 本地化语言
 * @param fallback 回退语言
 * @returns {VueI18n}
 */
function initI18n(locale, fallback) {
  Vue.use(VueI18n);
  let i18nOptions = {
    locale,
    fallbackLocale: fallback,
    silentFallbackWarn: true,
    messages,
  };
  return new VueI18n(i18nOptions);
}

export { initI18n };

locales/lang/zhLocale.js文件

代码语言:javascript
复制
/**
 * Created by liweiliang 406320591@QQ.com on 2022/10/17 14:11.
 */

const zhModulesFiles = require.context("./zh", true, /\.js$/);

const zhLang = zhModulesFiles.keys().reduce((modules, modulePath) => {
  const value = zhModulesFiles(modulePath);
  modules = { ...modules, ...value.default };
  return modules;
}, {});

export default zhLang;

locales/lang/enLocale.js文件

main.js引入

代码语言:javascript
复制
import { initI18n } from "@/locales/i18n";
const i18n = initI18n(Cookies.get('language') || 'en', "en");
new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2022-11-07,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档