Vue国际化处理 vue-i18n 以及项目自动切换中英文

2024-04-11 12:16:58

0. 直接上预览链接

Vue国际化处理 vue-i18n 以及项目自动切换中英文

1. 环境搭建

命令进入项目目录，执行以下命令安装vue 国际化插件vue-i18n

npm install vue-i18n –save

2. 项目增加国际化翻译文件

在项目的src下添加lang文件夹增加中文翻译文件（zh_CN.js）以及英文翻译文件（EN.js），里面分别存储项目中需要翻译的信息。

lang文件获取地址

3. 项目引入

在项目的main.js中引入vue-i18n插件，引入对应的翻译文件（zh_CN.js/EN.js）引入并结合Element-UI 国际化。
入下图

4. 项目使用

在中文翻译文件zh_CN中引入Element-UI的中文脚本，在英文翻译文件EN中引入Element-UI的英文脚本，并且在文件中加入要翻译的内容，具体如下：
- Zh_CN.js:
- EN.js:
然后在要翻译的地方进行翻译。

如果是element-ui 的，在要翻译的前面加上冒号

比如：label=“用户姓名” 就改成 :label=”$t(‘order.userName’)”

如果是html 显示的，就改用以下写法：

直接写成 {{$t(‘order.userName’)}},就会直接去往翻译脚本里面自动匹配。

选择语言之后把记录存在cookie里面。

再次打开浏览器访问项目初始化的时候从cookie里面得到之前选择的语言。

至此整合完毕源码地址

Vue学习大佬群493671066，美女多多。老司机快上车，来不及解释了。

作者相关Vue文章

基于Vue2.0实现后台系统权限控制

vue2.0-基于elementui换肤[自定义主题]

前端文档汇总

VUE2.0增删改查附编辑添加model(弹框)组件共用

打赏衷心的表示感谢

Vue国际化处理 vue-i18n 以及项目自动切换中英文相关推荐

Vue自定义组件--输入框的双向绑定--自动切换输入法的录入框
最简单的Input的封装 HtmlInput.vue <template><div><input :value="value" @input=&quo ...
vue中如何使用i18n实现国际化
一.前言在4k广告机中需要实现多语言切换,这时候接触到国际化,前端框架无数,其中几种热门的框架都有相匹配的国际化插件工具.比如: vue + vue-i18n angular + angular-t ...
使用 vue-i18n 进行Vue国际化处理，使项目切换中英文
1.下载安装插件命令进入项目目录,执行以下命令安装vue 国际化插件vue-i18n npm install vue-i18n --save 2. 项目增加国际化翻译文件在项目的src下添加lan ...
vue中开发多语言（国际化）,vue+i18n（详细教程）
目录第一步: 第二步: 第三步: 第四步: 最后: 前言:我们有时候会遇到一个项目需要支持多语言,而用直接翻译的插件时常会导致翻译的结果跟自己预想的有所偏差或者结果太长造成页面结构紊乱而这个时候就需 ...
前端框架Vue——vue-i18n ，vue项目中如何实现国际化，$t的用法
前端框架Vue--vue-i18n ,vue项目中如何实现国际化,$t的用法 vue中html页面写入$t('')怎么显示
vue项目国际化 vue-i18n以及踩坑解决小姐姐手把手教你VUE国际化~
1.安装配置 - 安装 $ npm install vue-i18n 或者: <script src="https://unpkg.com/vue/dist/vue.js"& ...
vue配置启动项目自动打开浏览器
vue配置启动项目自动打开浏览器 1.找到项目中的config文件夹内的index.js,里面有一个配置是autoOpenBrowser:false: 设置为true即可(或者全局搜索autoOpen ...
Vue项目自动部署之一、阿里云Linux服务器、域名购买和使用
购买阿里云Linux服务器如果已有服务器请直接跳转到[传统部署方式] 登录阿里云,访问云服务器 ECS 购买地址:https://ecs-buy.aliyun.com/ 也可从首页导航菜单进入. ...
vue国际化-vue-i18n的配置
1.前提基础对vue.js.vuex等有基本的了解 element国际化配置 2.安装依赖 npm i -S element-ui vue-i18n js-cookie 复制代码安装js-cook ...

最新文章

热门文章