Vue-i18n 结合iview国际化的使用，以及一些疑问

最新推荐文章于 2023-05-12 17:51:16 发布
VIP文章 最新推荐文章于 2023-05-12 17:51:16 发布
阅读量3k 收藏 3
点赞数 1
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cienven/article/details/93519276
版权

vue-i18n的使用

环境（iview UI也要适配国际化)

由于项目要求系统支持国际化，故需要在原来的项目中添加vue-i18n包（之前用了vuex-i18n, 但是不知道怎么样去动态改变iview的国际化，如果有大佬知道恳请告知)。

配置国际化

在package.json添加vue-i18n
"vue-i18n": "^8.11.2"

在main.js中配置国际化

  1. 创建本地 zh.js 以及 en.js
    en.js

    LOCATION_ERROR: Location Error
QUANTITY_ERROR: Quantity Error
REPEAT_QR_CODE: Repeat QR Code
SCAN_HISTORY: Scan History

    zh.js

    LOCATION_ERROR: 地址错误
QUANTITY_ERROR: 数量错误
REPEAT_QR_CODE: 重复扫码
SCAN_HISTORY: 扫码历史

  2. 导入iview和i18n以及两个本地中英文js文件和iview自带的语言js

    import zh from '@/locales/lang/zh.js'    //注意路径改成你创建的路径
import e
最低0.47元/天 解锁文章
禾肠不想改变
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-i18n-loader：用于自定义块的vue-i18n-loader
02-06
@ intlify / vue-i18n-loader 用于自定义块的vue-i18n加载程序 注意： :warning: next分支是Vue 3的开发分支！ 稳定版现已在分支中！ 状态：测试版 :star: 产品特点 i18n资源预编译 i18n自定义块 i18n资源定义 i18n资源导入 i18n资源定义的语言环境 全球范围内的i18n资源定义的语言环境 i18n资源格式 :optical_disk: 安装 NPM $ npm i --save-dev @intlify/vue-i18n-loader@next 纱 $ yarn add -D @intlify/vue-i18n-loader@next :rocket: i18n资源预编译
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工具和自由软件，其持续的开发完全依靠赞助商的支持。 如果您想成为赞助商，请考虑： :1st_place_medal: 金牌赞助商 :2nd_place_medal: 银牌赞助商 :3rd_place_medal: 青铜赞助商 :star: 特征 vue-i18n基本脚手架 使用vue-i18n-loader的单个文件组件中的区域设置消息 区域设置消息丢失和未使用的报告（实验性） 环境变量 :rocket: 入门 如果yon没有使用Vue CLI创建的项目： vue create my-vue-app 将插件安装到您的项目中： cd my-vue-app vue add i18n :hammer: 注入的命令 vue-cli-service i18n:report （实验性） 报告缺少的区域设置消息键和
vue.js国际化 vue-i18n插件的使用详解
10-19
本篇文章主要介绍了vue.js国际化 vue-i18n插件的使用详解，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
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工具和自由软件，其持续的开发完全依靠赞助商的支持。 如果您想成为赞助商，请考虑： :1st_place_medal: 金牌赞助商 :2nd_place_medal: 银牌赞助商 :3rd_place_medal: 青铜赞助商 :star: 特征 i18n资源预编译 i18n自定义块 静态捆绑进口 捆绑优化 :optical_disk: 安装 NPM $ npm i --save-dev @intlify/vite-plugin-vue-i18n 纱 $ yarn add -D @intlify/vite-plugin-vue-i18n :warning: 注意 安装此插件后，Vue I18n只能使用Composition API，如果要使用Legacy API，则需要将compositionOnly选项设置为f
vue-i18n提取-使用静态分析管理vue-i18n本地化。 报告丢失和未使用的i18n条目。-Vue.js开发
05-27
vue-i18n-extract vue-i18n-extract用于与使用vue-i18n的Vue.js项目一起使用。 运行vue-18n-extract时，将分析您的Vue.js源代码。vue-i18n-extract vue-i18n-extract是为与使用vue-i18n的Vue.js项目一起使用而构建的。 运行vue-18n-extract时，将分析您的Vue.js源代码中是否有任何vue-i18n键用法（例如$ t（''），$ tc（''），...）以及语言文件（例如。de_DE.js，en_EN.json，...），以便：I18NReport语言文件中缺少的键。 I18N报告语言文件中未使用的键。 :open_book:文档在这里查看官方文档：https://pixari.github.io/vue-i18n-extra
iview实现国际化
weixin_30483697的博客
08-20 245
由于项目需求需要配置国际化,使用的UI框架为iview, 按照官方要求下载 vue-i18n(8.14.0),版本大于6.0 按照官方提供的6.0配置方案解决。 第一步:创建一个新的目录 language 目录, 在该目录下创建 index.js、en-US.json、zh-CN.json。 　　　index.js 配置i18n: 按照官方文档引入需要的包，然后配置 (全是按照官...
vue inport html,【Vue】为什么在 vue 中不能使用 import()语法?
weixin_39690963的博客
06-21 870
我采用的是iview组件库的构建工具构建的项目,在使用过程中发现 import() 这个东西不能用!报错如上图,代码如下项目内的.babelrc如下{"presets": [["es2015","stage-3"]]}项目配置如下{"name": "ji","version": "1.0.0","description": "项目","main": "index.js","scripts": {"...
iview的国际化（vuei18n）
qq_32318311的博客
03-29 659
引入VueI18n import VueI18n from “vue-i18n” 注入vue实例 在local文件夹内准备两套文字（所有在项目中所需要用的文字全部存进来，在使用的时候使用$t()将变量包裹) 用一个对象message接收两套文字（并引入iview的语言包，将自己的语言包与iview的语言包合并） 准备一个变量用以切换中英文（存在localstorage中，任何页面点击切换时改变该...
Vue+Element 国际化(i18n)页面全覆盖（路由、表单检验、弹出框等）
热门推荐
雪急飞绪博客
04-14 1万+
国际化 安装 i18n internationalization 这个单词中，i 和 n 之间有 18 个字母 当前 i18n 最新版本为 9 版本，9 版本没有 VueI18n，import VueI18n from 'vue-i18n' 解构会报错 Cannot read property 'install' of undefined npm install vue-i18n@8 i18n 文件夹下的 index.js 文件 require.context 它允许传入一个目录进行搜索，一个标志指示是
Vue i18n elementui: Error in render: “TypeError: Cannot read properties of undefined (reading ‘_t‘)“
qq_31065757的博客
10-29 3379
Vue i18n elementui: Error in render: "TypeError: Cannot read properties of undefined (reading '_t')"
iview mysql_国际化_组件_iView UI_参考手册_非常教程
weixin_30921875的博客
03-04 203
国际化iView 的所有组件文案默认使用的是中文，通过设置可以使用其它语言。在 Webpack 中使用完整引入 iViewimport Vue from 'vue';import iView from 'iview';import locale from 'iview/dist/locale/en-US';Vue.use(iView, { locale });按需引入 iViewimport Vu...
vue中使用 i18n 遇到的问题
达拉崩巴斑得贝迪卜多比鲁翁_
01-28 7114
一： vue 报错解决：TypeError: Cannot read property ‘_t’ of undefined" 前端报错如下： [Vue warn]: Error in render: “TypeError: Cannot read property ‘_t’ of undefined” 是在项目中用了多语言配置，vue 跟 i18n之间的兼容问题。解决方法如下： Vue.use(ViewUI, { i18n: (key, value) => i18n.t(key, value) }
关于vue-i18n和view-design（iview）冲突解决方案
weixin_43367053的博客
08-17 835
#vue-i8n和view-design(iview)冲突，根本原因是因为view-design本身自己有一套多语言切换的机制，在使用vue-i18n时候需要将view-design的语言包和自己创建的语言文件合并 代码如下（示例）： import Vue from 'vue'; import App from './App.vue'; import ViewUI from 'view-design'; import 'view-design/dist/styles/iview.css'; import V
【element】element-ui/iview 1 国际化设置
jieweiwujie的博客
10-02 117
Object.assign({message:"hello"},zn)
Sails基础之View层——i18n
一个测试工程师的代码世界
05-17 585
Sails的View层提供了i18n的解决方案，参考https://sailsjs.com/documentation/concepts/internationalization/locales 我们可以实现一个中文/英文的国家化案例： 创建中文支持：config/locales/zh.json: { "Welcome": "欢迎" } 修改config/i18n.js，增加对中文的支持...
Vue国际化多语言处理 i18n的使用，如何减轻工作量？
qq_36995773的博客
05-12 424
最近一个比较大的项目需要添加国际化的功能，每个页面都得单独的去处理，再加上翻译文件，一整个难受啊...都是些复制粘贴费眼睛的辛苦活， 页面只能挨个的去改了，那就在翻译文件上偷点懒吧
Vue项目：iView & vue-i18n & echarts遇到的问题和解决方法
Alice_hhu的博客
04-14 3083
vue-i18n & echarts遇到的问题和解决方法data中的预置数据echarts图表中的 tooltip、markline等 data中的预置数据 data中的数据初始化一次之后，不手动修改是不会变化的，所以直接在data中使用this.$t('xxx')，只有页面首次加载是有效的，中途切换的话，是没办法跟着切换的。 解决方法： 将需要用到国际化的数据定义在computed里面...
vue后台管理系统——添加i18n国际化功能——技能提升
yehaocheng520的博客
03-15 2037
vue后台管理系统——添加i18n国际化功能——技能提升
Vue 项目中使用 iView 组件库设置样式不生效解决方案记录
qwe122343的博客
07-05 3361
将 iVew 引入项目后发现没有生效，经过查找总结问题是：安装 iView 的版本太低，与 Vue 不匹配，最后没有生效。 初始我执行的是 安装 iView 1.0的命令， $ npm install iview@1.0.1 --save 安装的是 Vue 3.0 vue create demoproject 在 HelloWorld.vue 中写入下面代码，界面中输入框未显示 <i-input :value.sync="value" placeholder="请输入..." style="
vue3中使用vue-i18n国际化
最新发布
01-18
在Vue 3中使用vue-i18n进行国际化配置的步骤如下： 1. 安装vue-i18n包： ```shell npm install vue-i18n ``` 2. 创建i18n实例： 在项目的根目录下创建一个`i18n.js`文件，并在其中导入`vue-i18n`包，然后创建一个新的`VueI18n`实例并导出它。可以根据需要配置语言包和其他选项。 ```javascript // i18n.js import { createI18n } from 'vue-i18n' const i18n = createI18n({ locale: 'en', // 默认语言 messages: { en: { // 英文语言包 // ... }, zh: { // 中文语言包 // ... } } }) export default i18n ``` 3. 在main.js中配置i18n使用： 在`main.js`文件中导入刚刚创建的`i18n`实例，并将其作为Vue应用的插件进行注册。 ```javascript // main.js import { createApp } from 'vue' import App from './App.vue' import i18n from './i18n' createApp(App).use(i18n).mount('#app') ``` 4. 在HTML中使用国际化文本： 在Vue组件的模板中，可以使用`$t`方法来获取国际化文本。例如： ```html <template> <div> <p>{{ $t('message') }}</p> </div> </template> ``` 5. 在JS中使用国际化文本： 在Vue组件的JavaScript代码中，可以使用`$t`方法来获取国际化文本。例如： ```javascript export default { methods: { showMessage() { console.log(this.$t('message')) } } } ``` 6. 修改语言（和获取当前语言）： 可以使用`$i18n.locale`来获取或设置当前的语言。例如： ```javascript // 获取当前语言 console.log(this.$i18n.locale) // 修改语言为中文 this.$i18n.locale = 'zh' ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值