首页 > 其他分享 >nuxt2 语言国际化 + element国际化

nuxt2 语言国际化 + element国际化

时间:2024-08-08 14:17:15浏览次数:18  
标签:国际化 cn nuxt2 locale json element prefix en i18n

踩坑:element国际化 动态设置语言必须使用服务端中的store状态才可以

import VueI18n from 'vue-i18n'
import enLocale from 'element-ui/lib/locale/lang/en'
import ElementLocale from 'element-ui/lib/locale'; // 导入 Element UI 的语言包
import cnLocale from 'element-ui/lib/locale/lang/zh-CN'; // 导入中文语言包

Vue.use(VueI18n)

export default({app,store}) =>{
    // app.i18n = new VueI18n({
    const i18n = new VueI18n({
    locale: store.state.language, // 设置默认语言
    messages:{
            en: {
            ...require('../locales/en.json'),
            ...enLocale
            },
            cn: {
            ...require('../locales/cn.json'),
            ...cnLocale
            },
        },
    })
    // 设置 Element UI 的语言
    ElementLocale.i18n((key, value) => i18n.t(key, value));
}

语言国际化

新建locales文件夹,对应cn.json en.json

nuxt.config.js 配置文件

modules: [
   "@nuxtjs/i18n",
],
i18n: {
        langDir: "locales/",
        locales: [
            {
                code: "en",
                iso: "en",
                name: 'English',
                file: "en.json",
            },
            {
                code: "cn",
                iso: "cn",
                name: '简体中文',
                file: "cn.json",
            },
        ],
        lazy: false,
        strategy: "prefix", // 路由策略,可选值有 prefix_except_default, prefix_and_default, prefix, no_prefix 等
        defaultLocale, // 直接设置默认语言代码
        vueI18n: {
            fallbackLocale: defaultLocale,
            messages: {} // 动态加载语言文件时可以留空
        },
        detectBrowserLanguage: {
            useCookie: true,
            cookieKey: 'language',
            onlyOnRoot: true, // 这意味着只在用户首次访问应用的根路径时进行语言重定向
            alwaysRedirect: false, // 根据需要调整
        },
        // router: { // 自定义路由规则 添加前缀,但保持自定义路由结构
        //     path: '{{$locale}}/_custom_path', // 注意:对于完全自定义的路由,你可能需要根据实际情况调整这部分配置
        //     prefix: '{{$locale}}' // 或者如果所有路由都应该是 /lang/path 这样的形式,则可以简化为
        // }
    },

标签:国际化,cn,nuxt2,locale,json,element,prefix,en,i18n
From: https://www.cnblogs.com/brujie/p/18348853

相关文章

  • 前端国际化自动工具 - 国际化文案配置系统
    背景笔者之前所在的公司主要做东南亚和欧洲一些国家的业务,做的是Web后台管理系统,项目被不同国家(有的项目多达七八个国家)的客户使用,所以前端项目需要支持多语言展示,也就是适配国际化。日常编码中,系统需要接入前端web国际化插件,vue项目使用的是vue-i18n,而react项目......
  • createElement 和 cloneElement 的区别
    引言在React中,组件是构建用户界面的基本单元,它们可以通过不同的方式创建和操作。两个常用的方法是React.createElement和React.cloneElement。虽然它们都与React元素的创建和操作有关,但它们的用途和功能却完全不同。了解这两个方法的区别对于有效地构建和管理React应......
  • 基于Vue2+ElementUI/Vue3+ElementPlus对el-notification增加倒计时进度条特效,鼠标移入
    遇到一个需求就是对这个el-notification加一个倒计时进度条,方便用户知道该通知何时自动关闭。一、示例代码(1)基于Vue2+ElementUI的项目<template><div><el-button@click="showTip">doit</el-button></div></template><script>exportdefault{......
  • Axure导入ElementUI元件库——提升原型设计效率与质量
    在快速迭代的互联网产品开发过程中,高质量的原型设计是确保项目顺利进行的关键一步。AxureRP,作为一款强大的原型设计工具,以其丰富的交互功能和易用的界面设计,深受设计师和开发者的喜爱。而ElementUI,作为一套为开发者、设计师和产品经理准备的基于Vue2.0的桌面端组件库,以其优......
  • ElementUI元件库在Axure中使用
    一、ElementUI元件库介绍ElementUI 是一套为开发者、UI/UX设计师和产品经理准备的基于Vue2.0的桌面端组件库。它以其优雅的设计和丰富的组件,极大地提升了Web应用的开发效率与用户体验。ElementUI的组件设计精致且符合现代UI规范,包括按钮、表单、弹窗、菜单等多种类型,能够满......
  • Element el-form 表单校验,保存或提交验证某一项或者多项;validateField 的使用
    通常新增或者编辑对form表单的校验都是全局性的校验:this.$refs.form.validate(valid=>{if(valid){//校验通过,业务逻辑代码...}});如果需要对表单里的特定几个必填项进行校验,应该如何实现? 业务场景:下图点击保存按钮时,只需要校验前两项,其余参数不......
  • Element-plus UI框架获取表格中某一行的对象数据
    在Vue3中,#default="scope"是用于指定一个具名插槽(namedslot)的默认插槽,并且向该插槽传递作用域属性(scopedprops)。这个语法是在Vue3的模板编译器中引入的,它取代了Vue2中使用的slot-scope。使用Element-plusUI框架获取表格中某一行的数据,如下面的示例代码:<template>......
  • selenium webdriver出现Element is not currently visible and so may not be interac
    问题分析可能是没有加载完成,元素找不到。元素加载完成,但是元素需要点击按钮,才会触发元素插入进来元素加载完成,看到的值和实际后台传输的值是不一致的元素加载完成,本质是只有属性,是没有值的。看到的都是临时函数调用显示出来的解决方案针对第一种可以适当延长休眠时间来......
  • SpringBoot + Vue + ElementUI 的人力资源管理系统-附项目源码与配套文档
    摘要在如今这个人才需求量大的时代,各方企业为了永葆企业的活力与生机,在不断开拓进取的同时,又广泛纳用人才,为企业的长久发展奠定了基础。于是,各个企业与部门机构,都不可避免地会接触到人力资源管理的问题。Hrm是一款人力资源管理系统,其主要功能模块有员工个人信息修改、请......
  • driver. findElement()vs Selenium中的Webelement. findElement()
    Selenium是一个开源工具,可以自动化Web浏览器并帮助测试Web应用程序。它是Web应用程序测试中使用最广泛的工具之一。在Selenium中,两种常用的查找Web元素的方法是driver.findElement和WebElement.findElement。本文将讨论它们之间的差异。findElement()方法声明WebElementfindE......