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

最新推荐文章于 2025-06-12 18:00:19 发布

禾肠不想改变

最新推荐文章于 2025-06-12 18:00:19 发布

阅读量3.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/cienven/article/details/93519276

本文介绍了如何在项目中使用Vue-i18n进行国际化配置，包括在main.js中设置、创建本地zh.js和en.js文件。在遇到iview组件国际化未生效的问题后，参考他人博客找到了解决办法，即通过修改配置并添加到vue文件中，通过事件监听和data存储实现语言切换。虽然示例代码部分为手写，可能存在错误，但揭示了实现国际化的基本流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

配置国际化

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

在main.js中配置国际化

创建本地 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: 扫码历史

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

import zh from '@/locales/lang/zh.js'    //注意路径改成你创建的路径
import en from '@/locales/lang/en.js'    //注意路径改成你创建的路径
import ien from 'iview/dist/locale/en-US'
import izh from 'iview/dist/locale/zh-CN'

配置i18n

Vue.use(VueI18n)
Vue.locale = () => {}
const messages = {
  'en-US': Objec

最低0.47元/天解锁文章

200万优质内容无限畅学