美文网首页
vue项目国际化多语言(若语言包过大,则可以考虑与后台配合处理)

vue项目国际化多语言(若语言包过大,则可以考虑与后台配合处理)

作者: 江南之城 | 来源:发表于2018-11-13 14:34 被阅读0次

近期完成了一个移动端的项目,实现了三种语言。利用的是i18n插件,有一个问题就是:当语言包过大的时候,项目运行起来比较慢。此时我们处理方法是,将一些动态的文字由后台传给前端,语言包只存储不变的一些文字。

1、安装

npm install vue-i18n --save

2、如下图建立对应的项目文件结构


3、在assets文件夹下i18n文件夹里面的en.js和ft.js如下:

  • en.js文件内容
/*英文包 en*/
export default {
   login:{
        'title' : 'Software system',
        'username' : 'Please enter the user name',
        'password' : 'Please enter your password',
        'login' : 'Login',
        'language' : 'Please select language'
    }
   
}
  • ft.js文件内容
/*中文繁体语言 zh-CHT */
export default {
   login:{
        'title' : '軟件系統',
        'username' : '請輸入用戶名',
        'password' : '請輸入密碼',
        'login' : '登錄',
        'language' : '請選擇語言'
    }
   
}

4、在tools文件夹中新建i18n.js文件,文件内容

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import en from '../assets/i18n/en'
import ft from '../assets/i18n/ft'

Vue.use(VueI18n)

// 以下为语言包单独设置的场景,单独设置时语言包需单独引入
const messages = {
  'zh-CHT':ft, //中文繁体语言包
  'en': en  // 英文语言包
}

export default new VueI18n({
  locale : "en", // set locale 默认显示英文
  messages : messages // set locale messages
})

5、最后在main.js里面全局引入并挂载

//...其他代码

//引入多语言支持
import i18n from './tools/i18n'

//...其他代码

new Vue({
  el: '#app',
  i18n,     //挂载i18n
  router,
  store,
  components: { App },
  template: '<App/>'
})

6、使用示例 比如在login.vue组件中

//template
<h3>{{$t("login.title")}}</h3>
<button @click='langToggle'>en/中</button>

//js    在js使用时则为 this.$t("login.title")
methods:{
  langToggle(){   //切换语言
      if(this.$i18n.locale = 'zh-CHT'){
        this.$i18n.locale = 'en';
      }else{
        this.$i18n.locale = 'zh-CHT';
      }
  }
}

相关文章

  • vue项目国际化多语言(若语言包过大,则可以考虑与后台配合处理)

    近期完成了一个移动端的项目,实现了三种语言。利用的是i18n插件,有一个问题就是:当语言包过大的时候,项目运行起来...

  • 国际化:i18n实现多语言

    如果项目需要多语言的支持,我们需要做国际化 使用 vue-i18n 来实现多语言的界面 安装 关于语言包,我们有几...

  • vue多语言化

    随着国际化的趋势,项目中配置多语言切换也越来越有必要,本篇文章将会介绍如何在vue项目中配置多语言化 安装:npm...

  • Vue3 + Element Plus + i18n 国际化

    1 前言 本篇旨在 Vue3 + Element Plus 国际化配置,支持多语言切换 2 Vue3 国际化 2....

  • 网站多语言

    在vuejs / awesome-vue中找到能够实现多语言包的插件kazupon / vue-i18n。文档写的...

  • 125、Ant-design-vue + vue-i18n配置前

    需求 项目基于Vue进行开发,使用了ant-design-vue框架,然后需要做国际化。此时做国际化需要考虑两方面...

  • 使用vue-i18n为vue添加多语言支持

    前言 最近项目因为国际化原因使用到了多语言,因为前端是使用vue的,后端同学就没有办法帮忙做了,而我们的vue又没...

  • i18n国际化

    vue中如何使用i18n实现国际化 一、前言 项目中需要实现多语言切换,这时候接触到国际化,前端框架无数,其中几种...

  • uni-app 语言化 Vue-i18n

    说到vue-i18n,我们并不陌生,国际化多语言实现。 1.安装依赖包 2.注入vue实例中,项目中实现调用api...

  • PHP Laravel 多语言配置

    公司后台项目PHP Laravel,最近接手,因为项目要求多语言,自然一些错误信息也要多语言处理。百度了很多花里胡...

网友评论

      本文标题:vue项目国际化多语言(若语言包过大,则可以考虑与后台配合处理)

      本文链接:https://www.haomeiwen.com/subject/exmkfqtx.html