vue 国际化引入vue-i18n后，html正常，但是v-for里的data切换语言不起作用，只展示英文

最新推荐文章于 2024-03-05 14:19:34 发布
最新推荐文章于 2024-03-05 14:19:34 发布
阅读量557 收藏 1
点赞数 1
分类专栏： 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/changyana/article/details/128657311
版权
系统现已支持中英文适配，之前出现无法切换中文的情况是由于加载顺序导致的。修复后，用户可以正常切换并显示不同语言版本。
摘要由CSDN通过智能技术生成

【更改前】是只有英文，切换中文语言也没有任何变化。
【更改后】是可以进行中英文适配的，是正确的。
出现这个问题是跟加载的先后顺序有关
在这里插入图片描述
在这里插入图片描述

ChangYan.
关注
专栏目录
vue-i18n国际化在data中切换不起作用
jieweiwujie的博客
09-17 1096
1 npm install vue-i18n 2引入插件包 // 引入插件和语言包 import VueI18n from 'vue-i18n' import zh from '@/i18n/langs/zh' import en from '@/i18n/langs/en' Vue.use(VueI18n) 3实例化 //实例化vue-i18n const i18n = new VueI18n({ // 从本地存储中取，如果没有默认为中文， // 这样可以解决切换语言后，没记住选择的语
vuecli3有关i18n中英文切换问题
Weightlessly的博客
12-20 1191
1、npm安装 npm install vue-i18n 2、main.js配置 import VueI18n from 'vue-i18n'; Vue.use(VueI18n); //有关i18n const i18n = new VueI18n({ locale: 'zh',//表示默认的语言 修改全局locale值可以导入message中不同的包 messages: { 'zh': require('./lang/zh'), // 中文语言包 'en': require(
vue（+Element）项目用vue-i18n实现国际化
BigFamer的博客
05-15 634
一、前言 vue+element开发的项目实现国际化还是比较简单的，特别是对于前后端完全分离的项目。基于Node构建的Vue项目是有成熟的方案：vue + vue-i18n。但是其中还是有只得留意的点，特别是对于第一次实现国际化的童鞋。 二、demo效果展示 1、在首页选择语种实现语种切换 2、内容页的中文效果 3、内容页的英文效果 三、前端实现国际化 1、安装vue-i18n 我的项目是基于vue开发的，首先需要安装vue-i18n，推荐使用cnpm（npm也可以，不过可能会比较慢）安装。输入命令：
vue数据定义在data中切换多语言显示异常问题
x_nweBorder01k的博客
01-05 361
vue数据定义在data中切换多语言显示异常问题
vue3使用i18n和echarts 切换语言不更换问题
weixin_45604639的博客
11-22 1550
vue3使用i18n和echarts 切换语言不更换问题
Vue i18n 中英文切换
素味平生的博客
07-03 1572
最近做的vue项目要实现国际化语言，自己琢磨看文档写出了一个简单的不能再简单的demo，供大家参考! 注：vue-cli项目 1.npm安装 npm install vue-i18n --save 2.i18n使用，在项目入口文件main.js中引入 import VueI18n from 'vue-i18n'； 在 src 目录下创建一个 langu...
vue 双语言切换中，data内翻译文字不正常切换的解决方案
kodmoqn的博客
07-29 273
vue 双语言切换中，data内翻译文字不正常切换的解决方案
使用vue 国际化i18n 实现多实现语言切换功能
10-17
特别是对于前端框架Vue.js，它已经具有支持国际化插件的能力，本文将重点介绍如何使用Vue的国际化库vue-i18n来实现多语言切换功能。 首先，我们需要创建一个名为i18n的文件夹，在此文件夹内创建三个主要文件：en.js...
Vue如何基于vue-i18n实现多国语言兼容
10-15
在实际项目中，为了使应用能够适应不同国家和地区的用户，开发者通常会利用国际化(i18n)库来实现多语言切换。Vue 的 i18n 库就是 `vue-i18n`，它允许开发者轻松地管理和切换应用中的语言。 **安装与配置** 首先，...
vue.js国际化 vue-i18n插件的使用详解
10-19
在开发多语言应用时，Vue.js 使用了 `vue-i18n` 这个强大的国际化插件，使得开发者能够轻松地为不同地区和语言的用户提供本地化的体验。本文将深入讲解 `vue-i18n` 的安装和使用方法。 首先，我们来看一下 `vue-i18...
vue3中引入vue-i18n, 国际化方案
bsegebr的博客
02-23 2135
前言 该项目使用vue(3.0.5)+ vue-i18n(9.1.2) +vite2.0 所谓的vue-i18n国际化方案，简而言之，就是根据它的规则自己建立一套语言字典，对于每一个字（message）都有一个统一的标识符，我们直接在文中使用该标识符代替原来固定的某一语言，该方案在内部会自动转为你需要查看的语言。 原因 当前项目需要采用国际化方案，但因为采用了vue3.0，网上诸多说明不太明白，故在此记录一下。。。 使用流程 1. 下载安装 npm install vue-i18n 2.在main.js所
循环语句:v-for
冰点契约的博客
01-25 153
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>for循环</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <div id="ap
解决vue-i18n国际化在data中用v-for循环出来的数据不更新
KlossFu
08-23 7182
html中使用{{$t('XXXX')}}的数据就会跟着更新，data中定义的数组就没有更新。 折腾了我很久，看到别人说用computed，蛮不现实的，因为使用数组定义的数据量太大，不可能一个个的去在computed中定义。看到了一位大神解决的，是最简单的解决方法了。 这个思路应该是将js中不能自动更新的数据，全部放到html中渲染，而不是在js中调用this.$t('xxxx')，刚才说过了...
vue-i18n实现国际化
司马懿的西山居
02-11 1151
需求 如果项目需要国际化，即点击按钮切换 中/英文。那么就需要引入 vue-i18n 插件 安装 首先创建项目 vue init webpack <项目名> 然后安装 i18n 插件 npm install vue-i18n --save 创建语言包 src/common/lang/en.js export const lang = { welcome: 'Welcome to Your Vue.js App', essential_links: 'Essential Links',
解决vue项目中i18n data里切换翻译不生效
全易
08-12 3298
vue-i18n国际化在data中切换失效
最新发布
qq_38655624的博客
03-05 638
vue-i18n国际化在data中切换失效。
vue国际化i18n切换未生效
Don't disturb me!的博客
07-21 2987
i18n切换语言未生效简洁写法
nuxtjs配置i18n多语言、切换语言data中数据不起作用解决方案
HeXinT的博客
04-10 3787
将this.$t() 写到了data属性里，切换语言不起作用data是一次性生产的，你这么写只能是在 data 初始化的时候拿到这些被国际化的值，并不能响应变化。官方的解决办法是，建议我们将表达式写到computed属性里，不要写到data里。关于刷新页面 语言会重置为初始语言的问题 我不太清楚具体情况，但是原因可能是因为配置中的detectBrowserLanguage导致， 默认为true 跟随浏览器语言展示，改为false即可。
vue 国际化 vue-i18n
u013790941的博客
11-06 206
首先下载依赖包 vue-i18n npm install vue-i18n -S 创建语言包 en 英文，zh中文 // zh.js const zh = { about: "关于", home: "首页" }; export default zh; // en.js const en = { about: "About", home: "Home" }; export ...
vue3中vue-i18n中英文切换
08-24
1. 首先，在main.js文件中，引入Vue和VueI18n，并创建一个实例i18n。 ```javascript import Vue from 'vue' import App from './App.vue' import VueI18n from 'vue-i18n' Vue.use(VueI18n) const i18n = new Vue...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值