Rumah >hujung hadapan web >tutorial js >vue项目国际化vue-i18n的安装使用教程

vue项目国际化vue-i18n的安装使用教程

亚连
亚连asal
2018-05-30 11:57:352497semak imbas

最近接触学习Vue.js框架结合Element-ui组件开发项目。由于最近需要实现国际化功能,所以下面这篇文章主要介绍了vue项目国际化vue-i18n的使用的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下。

前言

项目需要支持多语言,我们需要提取出项目中使用的静态文本,使用语言包进行管理, 当切换语言设置的时候,可以自动切换整个项目的文字显示。

发现Vue项目中有对应的组件 vue-i18n ,而且对项目的代码修改不大,于是就使用了这个组件去修改项目中的代码。下面话不多说了,来一起看看详细的介绍吧。

安装

// script 引入
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

// npm 安装
npm install vue-i18n

// yarn 安装
yarn add vue-i18n

一般一个项目中使用都是通过安装包的方式去运行的, script 引入的较少。

使用

项目中配置i18n

import VueI18n from &#39;vue-i18n&#39;
Vue.use(VueI18n)

const i18n = new VueI18n({
  local: &#39;cn&#39;, // 设置语言 
  messages // 语言包
})

new Vue({
  el: &#39;#app&#39;,
  ...
  i18n
})

// messages 大概的使用格式
{
  cn: {
    name: &#39;名字&#39;
  },
  us: {
    name: &#39;Name&#39;
  }
}

使用i18n

// html 需要使用 {{}} 将 name包装起来
{{$t(&#39;name&#39;)}}

// js
$t(&#39;name&#39;)

还有一些其他的用法,如:

  • 针对不同语言,显示不同的格式

  • 如果在传入自定义变量来控制显示

  • ... 具体的请参考官方文档。

切换语言的话,可以使用内置变量:

// 通过设置 locale 来切换语言
this.$i18n.locale = cn | us

语言包的生成 & 替换项目中原有的静态文本

这一步最关键,抽离出所有出现的汉字,替换成 $t('xxx') ,维护多个版本的语言文件

语言包这边是这么处理的,项目下新增一个目录languages

--languages
  --lib
    -- cn.js // 中文语言包
    -- us.js // 英文语言包
    -- .. // 其他语言,暂未实践
  -- index.js // 导出语言包

cn.js

export default {
  common: {
    message: &#39;消息&#39;
  },
  xxx: {
  }
}

us.js

export default {
  common: {
    message: &#39;Messages&#39;
  },
  xxx: {
  }
}

index.js

import cn from &#39;./lib/cn.js&#39;
export default {
  cn,
  us
}

替换文本

<template>
  ...
  <p>{{$t(&#39;message&#39;)}}</p>
  ...
</template>

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

JS实现左边列表移到到右边列表功能

JS中用EL表达式获取上下文参数值的方法

jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法

Atas ialah kandungan terperinci vue项目国际化vue-i18n的安装使用教程. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn