搜索
简帛阁>技术文章>vue-i18n安装,$t的用法

vue-i18n安装,$t的用法

 

1、在 main.js 中引入 vue-i18n (前提是要先引入 vue)

import VueI18n from'vue-i18n'
Vue.use(VueI18n)

 

2、准备本地的翻译信息

const messages = {
  zh: {
    message: {
      hello:'好好学习,天天向上!'
    }
  },
  en: {
    message: {
      hello:'good good study, day day up!'
    }
  }
}

 

3、创建带有选项的 VueI18n 实例

const i18n = new VueI18n({
  locale:'en',// 语言标识
  messages
})

 

4、把 i18n 挂载到 vue 根实例上

const app =new Vue({
   router,
   i18n,
   ...App
}).$mount('#app')

 

5、html写入
 

使用$t方法实现国际化

<span>{{ $t('header.HeadMenu.logout') }}</span>

或者用v-text

<span v-text="$t('header.HeadMenu.logout')"></span>

 

1、在mainjs中引入vuei18n(前提是要先引入vue)importVueI18nfrom'vuei18n'Vueuse(VueI18n)2、准备本地翻译信息constmessages{zh
前言项目需要支持多语言,我们需要提取出项目中使用静态文本,使用语言包进行管理,当切换语言设置时候,可以自动切换整个项目文字显示。发现Vue项目中有对应组件vue-i18n,而且对项目
们会遇到国际化问题,比如一个页面可以切换中英文,如果同样代码写两份,势必会造成严重冗余,所以我们可以利用国际化,优化代码结构如何使用第一步安装依赖npminstallsavevuei18n
一,安装i18n第三方库:liuhongdi@lhdpc:/data/vue/admweb$npminstallvuei18n@nextsavenpmhttpfetchGET200https://r
之前一直想做个国际化、在线换肤和拖拉拽生成网页demo,或者说实现思路。拖拉拽生成网页一直没什么思路,今天先实现国际化。当然是用插件了,不是自己实现。vuei18n使用很简单:安装依赖:npmivu
1安装vuei18n2src/lang/indexjsimportVuefromvue;importVueI18nfromvuei18n;importelementZhLocalfromelemen
vue-i18n仓库地址:https://github.com/kazupon/vue-i18n兼容性:支持Vue.js2.x以上版本安装方法:(此处只演示npm)npminstallvue-i18n
vuei18n是一个针对于vue国际化插件,使用非常简单1下载包npminstallvuei18n2、创建中、英文包文件创建两个文件,一个为zhjs代表中文,enjs代表英文,具体内容格式如下zhj
言:​近期业务需求,需要对原有项目进行国际化处理,该项目是基于Vue2+VantUI2x移动端H5SPA项目。上网查阅了相关资料,大多推荐使用vuei18n国际化插件来实现不同语言切换。经过测试
需求公司项目需要国际化,点击按钮切换中文/英文1、安装npminstallvuei18nsave2、注入vue实例中,项目中实现调用api和模板语法importVueI18nfrom'vuei18n'