html引vue怎么实现国际化,前端框架Vue.js——vue-i18n ，vue项目中如何实现国际化...-CSDN博客

本项目利用 VueI18n 组件进行国际化，使用之前，需要进行安装

$ npm install vue-i18n

一、框架引入步骤：

1. 先在 main.js 中引入 vue-i18n。

//国际化插件

import utils from '@/config/cookieUtils'

import VueI18n from 'vue-i18n'Vue.use(VueI18n)//通过插件的形式挂载

let currentLang= utils.get('CurrentLang')if (currentLang !== 'en-US') {

currentLang= 'zh-CN'}const i18n = newVueI18n({

locale: currentLang,//语言标识//this.$i18n.locale//通过切换locale的值来实现语言切换

messages: {'zh-CN': require('./lang/zh'), //中文语言包

'en-US': require('./lang/en') //英文语言包

}

})

2. 创建语言包文件

zh.js 代码：

export const m ={

home_page:'首页',

app_center:'应用中心',

document_center:'文档中心',

document:'文档',

plat_des:'平台概述',

API_des:'API 简介',

front_comp:'前端组件',

ability_comp:'能力组件',

jicheng_center:'集成中心',

common_problem:'常见问题',

api_interface:'API接口',

manager_controlle:'管理控制台',

service_controlle:'服务治理平台',

more:'更多',haopingRank:'好评排行',

visitRank:'访问排行',

downloadRank:'下载排行'}

en.js

export const m ={

home_page:'Home',

app_center:'App Center',

document_center:'Document',

document:'Document',

plat_des:'Introduction',

API_des:'API Introduction',

front_comp:'Front Component',

ability_comp:'Ability Component',

jicheng_center:'Integration Center',

common_problem:'Normal Problem',

api_interface:'API Interface',

manager_controlle:'Control',

service_controlle:'Service Manage Control',

more:'More',haopingRank:'Ping Rank',

visitRank:'Visit Rank',

downloadRank:'Download Rank'}

3. 实现语言切换

data () {return{

lang: utils.get('CurrentLang')

}

切换语言

changeLangEvent: function () {this.$confirm('确定切换语言吗?', '提示', {

confirmButtonText:'确定',

cancelButtonText:'取消',

type:'warning'}).then(()=>{//切换语言

if (this.lang === 'zh-CN') {this.lang = 'en-US'}else{this.lang = 'zh-CN'}this.$i18n.locale = this.lang //关键语句

utils.set('CurrentLang', this.lang)

}).catch(() =>{this.$message({

type:'info'})

})

}

4. 接口层面实现多语言，方案为：在HTTP请求头中携带语言信息，接口服务根据语言，返回不同的语言环境响应体。

本项目 vue.js 使用了 axios 组件，实现的话就统一在HTTP请求request拦截器中处理，代码如下：

//http request 拦截器

axios.interceptors.request.use(

config=>{//语言环境设置

let currentLang = utils.get('CurrentLang')if (currentLang === 'en-US') {

config.headers['X-Client-Language'] = 'en-US'}else{

config.headers['X-Client-Language'] = 'zh-CN'}returnconfig

err=>{returnPromise.reject(err)

})

以上几个步骤就实现了前端的国际化框架引入。以下就是需要对每个有文字显示的地方进行处理。

二、文字显示调用方式：

1. 直接显示

2. 绑定方式调用：

3.JS调用字段值

this.$i18n.messages[this.$i18n.locale].m.manual

vm.$i18n.messages[vm.$i18n.locale].m.manual

三、Element-UI 组件的国际化

1. 在main.js中引入

import enLocale from 'element-ui/lib/locale/lang/en'

import zhLocale from 'element-ui/lib/locale/lang/zh-CN'

import locale from 'element-ui/lib/locale'

2. 语言包判断

if (currentLang === 'en-US') {

import('../static/css/en.css')

Vue.use(ElementUI, {enLocale})

locale.use(enLocale)

} else {

Vue.use(ElementUI, {zhLocale})

locale.use(zhLocale)

}