localStorage.setItem('locale-lang',value)}return{currentLocale,changeLocale}} 3、 在入口文件中配置 在入口 src/main.js 文件中注册 vue-i18n 实例 import{createApp}from'vue'importElementPlusfrom'element-plus'import'element-plus/dist/index.css'importi18nfrom'./lang'constapp=createApp()app.use(Elemen...
Element Plus:Element Plus 是一个基于 Vue 3 的组件库,用于快速构建现代化的网页应用。它提供了一套丰富的 UI 组件,帮助开发者更加高效地实现复杂的用户界面。 vue-i18n:vue-i18n 是 Vue.js 的国际化插件,用于在 Vue 应用中实现多语言支持。它允许开发者轻松地在应用中切换语言,并根据用户的语言偏好显示相应的...
创建一个index.ts文件配置vue-i18n并且整合整个lang文件夹下面的所有语言文件 import{createI18n,I18nOptions}from'vue-i18n'import{store}from'@/store'import{useAppStore}from'@/store/modules/app'// 本地语言包importenLocalefrom'./package/en'importzhCnLocalefrom'./package/zh-cn'constappStore=useAppStore(s...
import ZhLocalefrom'element-plus/lib/locale/lang/zh-cn';// 中文import EhLocalefrom'element-plus/lib/locale/lang/en';// 英文import I18nfrom"@/lang/index";//引入i18n组件 let locale =''; //控制 element-plus 组件语言if(I18n.global.fallbackLocale =='zh') { locale= ZhLocaleasunknownasstri...
createApp(App).use(store).use(router).use(ElementPlus).use(common).use(i18n).mount('#app'); 新建文件夹language, language文件夹下创建lang文件夹、index.ts,lang文件夹下创建语言类型文件 自动引入文件类型文件 1 2 3 4 5 6 7 8 9 10
Vue3 ts element plus 国际化 vue-i18n 1. 安装 2. 配置 3. i18n使用 4. 常用方法 5. v-t 使用 6. 组件插值 最近vue项目遇到需求,将项目全局国际化,要求中、英、日三种语言自由切换,在这里记录一下vue-i18n国际化语言包处理插件的使用,具体可参考:vue-i18n官方文档。
main.ts引入i18n import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import ElementPlus from "./plugins/ElementPlus"; import common from "./plugins/common"; import i18n from './language'; createApp(App).use(store)...
1、安装i18n: npm install vue-i18n@next 2、main.ts 引入: import { createApp }from'vue'; import Appfrom'./App.vue'; import routerfrom'./router'; import storefrom'./store'; import ElementPlusfrom'element-plus'; import'element-plus/lib/theme-chalk/index.css'; ...
exportconsti18n =createI18n({ ...legacy:false, }); 可以正常启动,但在设置时**proxy.$i18n 变成了空对象**,proxy.$i18n应该是上面导出并且已经在main挂载的i18n。 const setI18nConfig = (locale:string) => { proxy.mittBus.emit("getI18nConfig", proxy.$i18n.messages[locale]); ...
本篇旨在 Vue3 + Element Plus 国际化配置,支持多语言切换 2 Vue3 国际化 2.1 安装 vue-i18n npm i vue-i18n 2.2 新建 locales 文件夹 以简体中文和英文为例 在src 下新建 locales 文件夹 在locales 文件夹下新建 zh-cn.ts exportdefault{buttons:{login:'登录'},menus:{home:'首页'}} ...