vue3使用vue-i18n插件的问题

在使用electron-vite构建应用过程中,使用语言国际化插件vue-i18n插件,在 {{$t('login')}}时,$t报红,显示找不到,但是功能正常,有没有解决的办法,不解决的话electron无法打包应用,使用的是vue3+ts

img

这是代码

import { createI18n } from 'vue-i18n'

// import el_zh_cn from 'element-plus/lib/locale/lang/zh-cn'
// import el_en from 'element-plus/lib/locale/lang/en'

import zh from './lang/zh-cn'
import en from './lang/en'

const messages = {
  // 'zh-cn':{
  //   el:el_zh_cn,
  //   ...zh
  // },
  // 'en':{
  //   el:el_en,
  //   ...en
  // }
  en,
  zh
}

const language = (navigator.language || 'en').toLocaleLowerCase() // 这是获取浏览器的语言

const i18n = createI18n({
  globalInjection: true,
  locale: localStorage.getItem('lang') || language.split('-')[0] || 'en', // 首先从缓存里拿，没有的话就用浏览器语言，
  fallbackLocale: 'zh-cn',
  messages
})

export default i18n

这一main.ts引入代码

import { createApp } from 'vue'
import App from './App.vue'
// 引用(use)路由 main.ts
import router from './router/index'
import { createPinia } from 'pinia'
//全局引入element-plus的css样式,解决element-plu组件样式不生效问题
import 'element-plus/dist/index.css'

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

import i18n from './assets/css/language/index.js'

const app = createApp(App)
app.use(router)
app.use(createPinia())
app.use(i18n)
app.config.globalProperties.$i18n = i18n.global

app.mount('#app')
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

可以看下这篇文章

【相关推荐】



  • 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7484429
  • 你也可以参考下这篇文章：vue3 安装使用vue-i18n实时切换语言 不用刷新
  • 除此之外, 这篇博客: vue3.0安装使用vue-i18n实时切换语言 不用刷新中的 vue3.0安装使用vue-i18n实时切换语言 不用刷新 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

    最近在公司没事做，就研究下升级项目到vue3，遇到个切换语言的问题，解决后在这里记录下来，希望能帮到有需要的同学：
    先看看效果

    我的版本
    “vue”: “^3.0.0”,
    “vue-i18n”: “^9.0.0”

    • 安装 npm install vue-i18n@next 这样装的最新版的才能在vue3.0使用
    • 使用
      1. main.js

    在这里插入图片描述

    import { createApp } from “vue”;
    import App from “./App.vue”;
    import i18n from “./lang”;
    const app = createApp(App);
    app.use(i18n);
    app.mount("#app");
    2. ./lang文件夹
    src下新建lang文件夹，里面新建三个文件zh/en自由配置，下面我只是给举个例子配置按钮的中英文
    在这里插入图片描述
    en.js
    export default {
    button: {
    edit: “Edit”,
    update: “Update”,
    add: “Add”,
    del: “Delete”,
    search: “Search”,
    submit: “Submit”,
    save: “Save”,
    back: “Back”,
    cancel: “Cancel”,
    upload: “Upload”
    }
    }
    zh.js
    export default {
    button: {
    edit: “编辑”,
    update: “更新”,
    add: “添加”,
    del: “删除”,
    search: “查询”,
    submit: “提交”,
    save: “保存”,
    back: “返回”,
    cancel: “取消”,
    upload: “上传”
    }
    }
    index.js
    import { createI18n } from “vue-i18n”; //引入vue-i18n组件
    import zh from “./zh”;
    import en from “./en”;
    //注册i18n实例并引入语言文件
    const i18n = createI18n({
    locale: localStorage.getItem(“lang”) || “zh”, // 语言标识（缓存里面没有就用中文）
    fallbackLocale: “zh”, //没有英文的时候默认中文语言
    messages: {
    en,
    zh
    }
    });
    export default i18n;
    vue页面切换语言
    写一个按钮 点击触发changeLanguage这个事件 就可以实时切换语言显示了
    在这里插入图片描述

    切换语言的关键代码
    ctx.$i18n.locale = locale; //切换当前语言环境

    JS中取值
    vue2.0我们都知道很简单this.$t(“button.add”) 就能轻而易举取到，但是vue3.0没有this，因此我用的getCurrentInstance()
    看官方说明https://www.vue3js.cn/docs/zh/api/composition-api.html#getcurrentinstance
    直接在控制台打印出来这个getCurrentInstance(),发现里面有ctx和proxy两个属性功能几乎一样，暂且就先当vue2里面的this用了
    ctx.$t(“button.add”) 或者 proxy.$t(“button.add”)

    vue官方提供的这个getCurrentInstance()也没细读，在这里当this使用可能被有些大佬取笑了，还在学习，希望能帮到有需要的同学.

    看到这里了点个赞吧！！！


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^