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 'vue-i18n'
Vue.use(VueI18n)

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

new Vue({
  el: '#app',
  ...
  i18n
})

// messages 大概的使用格式
{
  cn: {
    name: '名字'
  },
  us: {
    name： 'Name'
  }
}

使用i18n

// html 需要使用 {{}} 将 name包装起来
{{$t('name')}}

// js
$t('name')

还有一些其他的用法，如：

  • 针对不同语言，显示不同的格式
  • 如果在传入自定义变量来控制显示
  • ... 具体的请参考官方文档。

切换语言的话，可以使用内置变量：

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

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

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

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

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

cn.js

export default {
  common: {
    message: '消息'
  },
  xxx: {
  }
}

us.js

export default {
  common: {
    message: 'Messages'
  },
  xxx: {
  }
}

index.js

import cn from './lib/cn.js'
export default {
  cn,
  us
}

替换文本

<template>
  ...
  <div>{{$t('message')}}</div>
  ...
</template>

问题

  • 不同的语言，格式不同，长度不同，可能需要调整项目的样式，以保正常
  • 对于一个已经在使用的项目，生成语言包这一步工作量大，浪费时间
  • 没有考虑如果是否需要动态的加载语言包，而非初始的加载所有的语言包

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

您可能感兴趣的文章:

  • vue与vue-i18n结合实现后台数据的多语言切换方法
  • vue.js国际化 vue-i18n插件的使用详解
  • vue使用vue-i18n实现国际化的实现代码
赞 (0)

相关推荐

  • vue使用vue-i18n实现国际化的实现代码

    需求 公司项目需要国际化,点击按钮切换中文/英文 1.安装 npm install vue-i18n --save 2.注入 vue 实例中,项目中实现调用 api 和 模板语法 import VueI18n from 'vue-i18n' Vue.use(VueI18n) ; const i18n = new VueI18n({ locale: 'zh-CN', // 语言标识, 通过切换locale的值来实现语言切换,this.$i18n.locale messages: { 'zh-CN'

  • 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.js国际化 vue-i18n插件的使用详解

    安装方法 1.使用CDN直接引用 <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script> 2.NPM $ npm install vue-i18n 3.Yarn $ yarn add vue-i18n 使用方法 在这里只介绍v

  • Vue项目中使用Vux的安装过程

    Vue项目中使用Vux的安装过程

    最近想用vue+vux写一个项目,于是到vux的官网看了文档开始着手搭建项目,但是遇到一些坑.下面简单说下安装vux 的过程. 默认已安装vue环境 1.安装vux npm install vux --save-dev 2.安装vux-loader npm install vux-loader --save-dev //官网没提安装这个,但是不安装会报错 3.安装less-loader以正确编译less源码 npm install less less-loader --save-dev 4.安装

  • vue项目查看vue版本及cli版本的实现方式

    查看cli版本,执行如下: vue -V 查看vue版本 npm list vue 补充知识:vue老项目升级vue-cli3.0问题总结 升级步骤 1. 删除原vue-cli并安装vue-cli3.0 2.删除新项目中src下的内容,把原项目中src目录覆盖到新项目中 3.把router从目录文件夹改为文件,src/router/index.js提高一层变成src/router.js 4. 我的项目中src已经分为了views和components所以无需修改,如果不是这个结构需要自己区分下

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

    前言 项目需要支持多语言,我们需要提取出项目中使用的静态文本,使用语言包进行管理, 当切换语言设置的时候,可以自动切换整个项目的文字显示. 发现Vue项目中有对应的组件 vue-i18n ,而且对项目的代码修改不大,于是就使用了这个组件去修改项目中的代码.下面话不多说了,来一起看看详细的介绍吧. 安装 // script 引入 <script src="https://unpkg.com/vue/dist/vue.js"></script> <script

  • SpringBoot + Vue 项目部署上线到Linux 服务器的教程详解

    前言 给大家分享以下我是如何部署 SpringBoot + Vue 前后端分离的项目的,我用的 Linux 发行版是 CentOS7.5 有了一个基于 ElementUI 的电商后台管理系统,在开发一个相似的后台就会轻松很多.不过前面的系统的后端是使用 node 完成的,对于我们 Java 开发者来说,用不到.我学习的是 ElementUI 的使用,就足够了,然后后端服务就全部可以自己使用 SpringBoot 来完成 最近貌似 Vue3 正式版也发布了,正好有空看可以去看一看 提示:以下是本篇

  • Vue项目引发的「过滤器」使用教程

    前言 最近在项目的开发中,出现一些格式化数据的情况,比如字母的大小写,比如一些价格的数据格式.等等一些格式的显示. Name Price BTC $3896.23 ETH $136.64 在上面的表格中,我们需要处理数据的显示.这是我们时常遇到的情况. 通常我们会直接处理数据的输出,可以这么做. computed: { result() { return this.prices.map(price => "$" + price); } } 这些都是通过修改数据做到的. 不过,Vu

  • 教你用Cordova打包Vue项目的方法

    现在国内越来越多的开发者使用Vue开发混合app,但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app. 据我现在的了解打包Vue项目目前流行的就是使用weex和cordova.weex是阿里提供并且Vue的作者也极力推荐的,有兴趣的可以去学习使用一下.因为我本身是做angular+ionic的,所以比较青睐cordova,下面我就教大家怎么使用cordova打包Vue项目: 第一步:安装cordova 如果已经安装则直接跳过,否则执行以下命令: npm install -g cor

  • 详解用vue-cli来搭建vue项目和webpack

    vue-cli 用vue-cli来搭建vue项目 第一步:全局安装vue-cli sudo npm install vue-cli -g 第二步:初始化一个项目 vue init webpack-simple projectName 第三步:把文件切换到初始化的项目中 cd projectName 第四步:安装依赖 npm install 当然也可以用淘宝镜像cnpm来安装,这样快很多 cnpm install 第五步:运行 npm run dev 完成一个初始化vue项目 webpack 要开

  • 用Cordova打包Vue项目的方法步骤

    现在国内越来越多的开发者使用Vue开发混合app,但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app. 现在的打包Vue项目目前流行的就是使用weex和cordova.weex是阿里提供并且Vue的作者也极力推荐的,有兴趣的可以去学习使用一下.下面说说怎么使用cordova打包Vue项目: 第一步:安装cordova,创建好cordova项目. 第二步:修改vue项目 首先修改vue项目的index.html,引入cordova.js.这个引入在浏览器打开会报错.要打包后运行在真机

  • 创建Vue项目以及引入Iview的方法示例

    创建Vue项目 以及引入Iview 官方文档 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖,走你 $ cd my-project $ npm install $ npm run dev 以上是vue官方文档中Vue.js 提供一个 官方命令行工具 创建vue项目的方法. 我创建Vue项目过程 $ vue init webpack

  • vue项目创建步骤及路由router

    vue项目创建步骤及路由router

    1.创建一个vue项目步骤 (windows环境下).创建vue项目前,检查系统是否具备创建项目的条件(是否已经安装好了node.js.webpack.vue-cli).cmd打开终端. 1.1 如果还没安装node.js, 则先安装node.js,安装完成后,查看node版本 node -v 1.2 安装淘宝镜像, 安装完成后查看npm版本:npm -v npm install -g cnpm --registry=https://registry.npm.taobao.org 1.3 安装w

随机推荐