Vue中使用vue-i18插件实现多语言切换功能

2024-09-28 18:29:59

在基于vue-cli项目开发过程中，多语言切换功能可使用vue-i18插件，具体实现方法如下：

step1: 在项目中安装vue-i18插件

cnpm install vue-i18n --save-dev

step2:在项目的入口文件main.js中引入vue-i18n插件

import Vue from 'vue'
import router from './router'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
 locale: 'zh', // 语言标识
 messages: {
  'zh': require('./assets/lang/zh'),
  'en': require('./assets/lang/en')
 }
})
// vue实例中引入
/* eslint-disable no-new */
new Vue({
 el: '#app',
 i18n,
 router,
 template: '<Layout/>',
 components: {
  Layout
 },
})

step3:页面中使用

在模板中使用时，大概有以下3种情况，若有疏漏，望大家指正

zh.js

module.exports = {
 menu : {
   home:"首页"
 },
 content:{
   main:"这里是内容"
 }
}

en.js

module.exports = {
 menu : {
   home:"home"
 },
 content:{
   main:"this is content"
 }
}

1）在标签内作为正文内容

<div class="title">{{$t('menu.home')}}</div>

2)作为标签属性使用

<input :placeholder="$t('content.main')" type="text">

3)作为js中文字使用时

console.log(this.$t('content.main'));

4)待补充...

step4:页面上进行中英文切换，在中英文切换的按钮上绑定事件，如下：

tabEn: function () {
 this.$i18n.locale = 'en'
},
tabCn: function () {
 this.$i18n.locale = 'zh'
}

至此，vue-i18n插件使用完结。

总结

以上所述是小编给大家介绍的Vue中使用vue-i18插件实现多语言切换功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

您可能感兴趣的文章:

vue与vue-i18n结合实现后台数据的多语言切换方法

vue与vue-i18n结合实现后台数据的多语言切换方法

在XXX.js文件中定义函数: getUser(context,info){ context.$http.get(SERVER_URL+'/users',info).then(function(data){ let err =data.body.error; if(err===0){ let dataObj = data.body.userLists; //获取后台返回的数据 this.users = dataObj.items.map(function (e,i) { //遍历获取的数据,用t
Vue中使用vue-i18插件实现多语言切换功能

在基于vue-cli项目开发过程中,多语言切换功能可使用vue-i18插件,具体实现方法如下: step1: 在项目中安装vue-i18插件 cnpm install vue-i18n --save-dev step2:在项目的入口文件main.js中引入vue-i18n插件 import Vue from 'vue' import router from './router' import VueI18n from 'vue-i18n' Vue.use(VueI18n) const i18n
vue中自定义右键菜单插件

前言: 作为一个刚刚入门前端的搬砖工作者,写博客只是为了能够记录自己因为业务使用过的一些插件,为了后续更好的使用和改造本文分享了vue中自定义右键菜单插件的具体代码,供大家参考,具体内容如下演示用法通过npm安装插件 npm i vue-context -S 在main.js中引入并注册 import Vue from 'vue'; import VueContext from 'vue-context'; new Vue({ components: { VueContext
vue中elementUI里面一些插件的使用

目录全屏插件的引用动态主题的设置多语言实现初始化多语言包引入自定义语言包封装多语言插件总结全屏插件的引用全屏功能可以使用插件来实现第一步,安装全局插件screenfull npm i screenfull@5.1.0 第二步,封装全屏显示的插件 ScreenFull/index.vue <template> <div>  <el-button class="icon" @click="
vue中使用input[type="file"]实现文件上传功能

注意:input[type="file"] 标签中的属性accept="application/msword,application/pdf" 在pc上正常,但是在手机ios和android上这个文件格式限制会被忽略,所以需要在js中增加格式的判断,以及对应显示样式的设置.(我也是刚发现,如果有遇到这个问题的可以参考下---下面有更改:) ``` <template> <div id="my-careers"> <h
Vue中通过Vue.extend动态创建实例的方法

在Vue中,如果我们想要动态地来控制一个组件的显示和隐藏,比如通过点击按钮显示一个对话框或者弹出一条信息.我们通常会提前写好这个组件,然后通过v-if = "show"来控制它的显示隐藏.如下所示: <div> <button @click = "show = !show">弹出</button> <span v-if = "show">这是一条通过按钮控制显示隐藏的信息</span>
使用vue 国际化i18n 实现多实现语言切换功能

安装 npm install vue-i18n 新建一个文件夹 i18n ,内新建 en.js zh.js index.js 三个文件准备翻译信息 en.js export default { home: { helloworld: "hello workd !" } }; zh.js export default { home: { helloworld: "你好世界" } }; index.js 创建Vue-i18n实例 import Vue from &qu
vue中利用pinyin-pro纯前端实现拼音的模糊搜索功能

目录 1.安装配置插件 2.编写工具类方法 3.调用方法 1.安装配置插件 pinyin-pro官网网址: pinyin-pro - npm (npmjs.com) npm 安装 npm install pinyin-pro 项目中引入 import { pinyin } from 'pinyin-pro'; 2.编写工具类方法定义三个变量: // 双向绑定搜索框,由用户输入的数据 inputProvince: 'ninxia', // 从后台获取的,筛选前的总数据 totalProvince
Vue中的.vue文件的使用方式

目录定义.vue文件引用.vue文件使用render函数什么是.vue文件,它的作用是什么需要安装vue-loader npm i vue-loader vue-template-complier -D 然后在配置文件中新增匹配规则 {test:/\.vue$/,use:'vue-loader'} 定义.vue文件 <template>  </template> <script> //这里定义js //在这里导入文
vue中的自定义分页插件组件的示例

介绍一下,已经有很多的vue分页的组件了,大家都是大同小易,那么我就结合自身的使用,写出了一片文章首先在新建一个分页模块在模块中引入相应的代码,(内有详细的注释) template中 <div class="page-bar"> <ul> <li class="first"> <span>共{{dataNum}}条记录第 {{cur}} / {{all}} 页</span> </li> &
Vue中jsx不完全应用指南小结

前言:文章不介绍任务背景知识,没有原理说明,偏向于实践的总结和经验分享. 文章所有的代码是基于Vue CLI 3.x版本,不会涉及到一步步通过Webpack来配置JSX所需要的知识点. 在使用Vue开发项目时绝大多数情况下都是使用模板来写HTML,但是有些时候页面复杂又存在各种条件判断来显示/隐藏和拼凑页面内容,或者页面中很多部分存在部分DOM结构一样的时候就略显捉襟见肘,会写大量重复的代码,会出现单个.vue文件过长的情况,这个时候我们就需要更多的代码控制,这时候可以使用渲染函数. 渲染函数想

Vue中使用vue-i18插件实现多语言切换功能

您可能感兴趣的文章:

相关推荐

随机推荐