cli3+vue-i18n+ElementUI 多语言

最新推荐文章于 2024-06-18 14:49:22 发布
最新推荐文章于 2024-06-18 14:49:22 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/renlang7090/article/details/87862562
版权
vue 同时被 2 个专栏收录
9 篇文章 0 订阅
订阅专栏
js
3 篇文章 0 订阅
订阅专栏

cli3+vue-i18n+ElementUI 多语言

 

使用cli3 ui或者命令添加i18n添加完目录如图

locales文件夹下面默认是en.json和cn.json 修改目录为

en.js

cn.js

index.js

i18n.js

切换语言方法

T-wave
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-cli使用i18n插件
张小勇的博客
01-27 1137
1. 安装 npm install vue-i18n 2.创建语言包 在/assets/lg/ 目录下,新建zh.js作为中文语言包,新建en.js作为英文语言包,其中内容为 export const m={ "webName": "展会系统", "home": "系统首页", "setUp": "个人设置", "changePassword": "修改密码", "Logout": "退出登录", "eventManagement": "展会管理" }
vue-i18n vue-cli项目中实现国际化 多语言切换功能 一
10-30 448
vue-cli项目中引入vue-i18n 安装： npm install vue-i18n可参考vue-i18n官网文档 main.js中引入： import Vue from 'vue' import VueI18n from 'vue-i18n' Vue.use(VueI18n) 配置语言包（main.js）: const i18n = new VueI18n({ ...
Vue3 使用vue-i18n
最新发布
weixin_47190975的博客
06-18 251
vue3 使用 i18n国际化
vue3 i18n 设置国际化 语言切换
u014105655的博客
03-01 2867
vue3 i18n 设置国际化 语言切换
VUE-CLI 使用 VUEI18N 实现多语言前端项目
冷月醉雪的博客
01-07 544
更多详情请查看：VUE-CLI 使用 VUEI18N 实现多语言前端项目 · 语雀安装 vue-i18n 和 js-cookie。npm...https://www.yuque.com/lengyuezuixue/togedc/dr1lv0
解决同时使用vue-i18n和ElementUI国际化时出现的冲突
yzkdcsdn的博客
08-10 1079
解决vue-i18n和ElementUI国际化的同时使用引发的冲突
vue-cli-plugin-i18n:Vue CLI插件可将vue-i18n添加到您的Vue项目
05-11
:globe_with_meridians: vue-cli-plugin-i18n Vue CLI插件可将vue-i18n添加到您的Vue项目 :handshake: 支持新项目 Intlify Project是一个开源项目，其中包括Vue I18n和i18n工具和自由软件，其持续的开发完全依靠...
vue3+vite+monorepo+qiankun+pnpm+ vue-i18n、lodash、dayjs、windicss
08-05
vue3+vite+monorepo+qiankun+pnpm+ vue-i18n、lodash、dayjs、windicss vue3+vite+monorepo+qiankun+pnpm+ vue-i18n、lodash、dayjs、windicss vue3+vite+monorepo+qiankun+pnpm+ vue-i18n、lodash、dayjs、windicss...
vue3+vite+monorepo+qiankun+pnpm+vue-i18n、lodash、dayjs、windicss
08-05
vue3+vite+monorepo+qiankun+pnpm+vue-i18n、lodash、dayjs、windicss vue3+vite+monorepo+qiankun+pnpm+vue-i18n、lodash、dayjs、windicss vue3+vite+monorepo+qiankun+pnpm+vue-i18n、lodash、dayjs、windicss ...
vue-i18n-loader：用于自定义块的vue-i18n-loader
02-06
@ intlify / vue-i18n-loader 用于自定义块的vue-i18n加载程序 注意： :warning: next分支是Vue 3的开发分支！ 稳定版现已在分支中！ 状态：测试版 :star: 产品特点 i18n资源预编译 i18n自定义块 i18n资源定义 i18...
vite-plugin-vue-i18n:Vue I18n的快速插件
04-09
:globe_with_meridians: @ intlify / vite-plugin-vue-i18n Vue I18n的Vite插件 :handshake: 支持新项目 Intlify Project是一个开源项目，其中包括Vue I18n和i18n工具和自由软件，其持续的开发完全依靠赞助商的...
vue项目中使用vue-i18n报错的解决方法
12-09
前言 Vue-i18n大家应该都不陌生，Vue-i18n安装的安装方法如下： npm install vue-i18n --save 然而最近在vue项目中使用vue-i18n的时候，居然报错了，通过查找相关的资料终于找到了解决的方法，下面话不多说了，来一起看看详细的介绍吧 发现问题 iview-admin框架克隆到本地，添加路由的时候，稍不注意就会遇到以下情况： Value of key ‘xxx’ is not string! Cannot translate the value of keypath ‘xxx’. Use the value of keypath as defa
Vue-cli3项目处理包括（i18n/font-spider/xss/wangeditor）
weixin_34388207的博客
10-28 421
###项目开发阶段构建太慢超过300秒，按需加载所有组件也需50秒，转为vue-cli3.0配置少量webpack即可达到10秒的构建速度效果,热重载2秒，可以接受 vue-cli2>>>>vue-cli3 项目处理src直接移植到cli3项目 处理pug语法;vue.config.js补充chainWebpack chainWebpack: config =&gt...
vue2+elementUI+i18n 国际化语言切换实现
热门推荐
leo
08-15 1万+
vue-i18n github：https://github.com/kazupon/vue-i18n vue-i18n安装：  npm install vue-i18n --save 1.src目录下新建i18n文件夹>看下图 2. cn.js代码 import zhLocale from 'element-ui/lib/locale/lang/zh-CN' //引入elem...
vue项目中如何实现国际化
叫我官人
09-06 3418
  一、实现国际   首先，我开发是以 vue 为技术栈，所以如题用的国际化插件是 vue-i18n，附上 github 传送门。 1、我们得先有开发环境，先有项目跑起来，我推荐如果是喜欢用 vue 的小伙伴，可以尝试 vue-cli　官方脚手架。这边有我整理的一个脚手架 demo ，有助于你快速的进行 vue 模块化开发。 2、我们需要安装 vue-i18n, 推荐 npm 包依赖：...
Vue3的VueI18n多语言环境切换
zheng_jia_jun的博客
06-28 1033
Vue3 VueI18n 多语言环境切换 需求：项目中需要自定义切换中/英文 // 安装 npm install vue-i18n@next yarn add vue-i18n@next // vue3.0使用 import { createApp } from 'vue' import { createI18n } from 'vue-i18n' const i18n = createI18n({ // something vue-i18n options here ... }) co
vue-cli2项目-webpack3升级至4版本-报错解决详情记录(文末附新版本配置文件内容)
blingsky123的博客
07-04 3648
vue-cli2项目-webpack3升级至4版本-报错解决详情记录 更新4.x版本webpack，并升级相关插件 npm i -D webpack@latest npm i -D webpack-bundle-analyzer@latest webpack-merge@latest webpack-dev-server@latest UglifyJsPlugin报错—>webpack4.x写法改变 报错： D:\workspace\zy-evst-platform\node_mod
vue + element ui实现多语言切换
weixin_47316914的博客
07-20 1099
vue + element ui实现多语言切换 首先我们创建一个lang的文件 ，里面创建三个文件index.js(引入使用i18n模块)， en.js（英文包）， zh.js（中文包）… 其他语言的包 index.js 文件： import Vue from 'vue' // 引入vue import VueI18n from 'vue-i18n' // 引入i18n模块 import Cookies from 'js-cookie' // 封装了获取，设置，删除cookie的方法 import elem
vue element 如何使用多国语言国际化i18n
高先生的猫
02-24 1505
1.安装插件 npm install --save vue-i18n 2.在 src 文件夹下新增i18n文件夹，并且新增 i18n.ts 以及 zh.ts 以及 en.ts (本人使用的ts，如果你不使用请新建js文件) 文件目录如下 ├── App.vue ├── src │ └──i18n │ ├── message.ts │ └── index.ts └── main.ts 3.在 index.js 中写入以下内容 import Vue from "vue"; import m
nuxt + vue-i18n 踩坑记录
06-02
好的，我知道了，下面是我的回答： 首先，在使用nuxt和vue-i18n时，需要注意以下几点： 1. 在nuxt.config.js中配置vue-i18n： ``` module.exports = { modules: [ 'nuxt-i18n' ], i18n: { locales: [ { code: 'en', file: 'en.js' }, { code: 'zh', file: 'zh.js' } ], defaultLocale: 'en', lazy: true, langDir: 'lang/' } } ``` 2. 在lang文件夹中添加对应的语言文件： en.js： ``` export default { hello: 'Hello' } ``` zh.js： ``` export default { hello: '你好' } ``` 3. 在组件中使用$t方法： ``` <template> <div>{{ $t('hello') }}</div> </template> ``` 以上就是使用nuxt和vue-i18n时需要注意的一些问题，希望对你有帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值