关键词：
前言：
关于ERP管理系统的多语言，或者其他应用的多语言一直是我们比较麻烦的问题，大部分是使用 i18n 在代码里进行配置，如果想要修改语言就要自己去改代码！
今天我们分享一下如何不使用 i18n 去实现多语言，用到以下的技术栈：
ERP管理系统：Vue + 若依 + Element-ui
微信小程序 ：uniapp + uView
一、业务需求
1. 确定业务
最近要实现多语言的 ERP，以及对应的H5、小程序；但是因为语言可能不确定，需求是客户自己去添加、修改自己想要的语言，所以就需要在 ERP 上实现 一个叫 language(可以定义语言) 的功能，可以去给客户提供一个可以添加默认语言、添加新的语言、修改、删除当前语言的平台，如果当前语言没有加过翻译则用 [ key ] 这种方式去提醒客户，该 key 未加多语言！然后我们的ERP、H5、小程序就可以使用当前的全局多语言...
2. 实现思路
思路其实比较简单，但是复杂的需求往往离不开后端大佬支持！下面我们一起来捋一捋我们的实现思路(假设我们现在的需求是三个地区的语言：简体中文、繁体中文、英文)！
① 既然我们再 ERP 上需要有一个 language 的功能供客户去操作语言，考虑到客户还可能设置默认语言，添加多种不同地区的语言，所以我们的 UI 可以像下图设计的那样；
② 新增完地区语言以后我们该如何让去修改、新增的不同地区的语言呢？我们这个时候就需要 一个子页面，负责新增当前 key 的多语言，查询当前 key 的多语言去做修改，看完下图你就会明白啦！！！ 
③经过以上两个步骤我们已经成功的让客户实现了想要的效果，但是我们要怎么把后端大哥保存好的东西拿过来用呢
1. 保存时的数据结构：
key: "Status" texts:[ "languageName": "en-GB", "text": "Status" , "languageName": "zh-CN", "text": "状态" , "languageName": "zh-HK", "text": "狀態" ]
关于ERP 查询时的数据结构这里就不一一列举了，和上面类似！
2. ERP | H5 | 微信小程序 用时查询的数据结构：
// ERP | H5 | 微信小程序 用时的查询 // language_texts 是我们再 SQL Table 中存储的所有多语言集合 language_texts : key : 当前语言的value, // 如何知道当前语言，我们稍后再说 key : value, key : value, ... : ... ... : ...
3. 前端如何使用已经保存好的数据结构呢？
其实有了上面查询我们就可以用到 language_texts[ key ] 的方式去取出来我们想要的语言数据；使用的话也比较简单，js html 中的不同使用方法下面给大家一 一讲解 ；
值得我们思考的问题是 我们该何时把 当前语言集全部查询出来？
我这里采用的方案是在 new Vue 之前去调用我们当前的 VFrame方法，这样我们可以确保 我们的多语言所有的 [ key ] [ value ] 可以成功加载，具体步骤请看下方！
二、实现步骤
1. 新建 VFrame.js 文件
我这里的 VFrame.js 是直接建在Src 目录下的
import axiso from 'axios'
import getAll from '@/api/uxretail/application.js'
const format = require('string-format')
export default class VFrame
static host;
static wsUrl;
/**
* 在vue实例化之前调用异步start方法
*/
static start()
return new Promise((resolve, reject) =>
axiso.request(
url: "/static/appconfig.json",
method: "get",
).then(result =>
VFrame.host = (result.host || window.location.host);
VFrame.wsUrl = "ws://" + VFrame.host + ":" + result.wsPort + "/ws/notify/";
VFrame.getAll(resolve);
).catch(error =>
reject(error);
);
);
static getAll(resolve)
getAll().then(res =>
VFrame.applicationResource = res
resolve()
);
static l(key, ...args)
if (localStorage.getItem("ux_debug_language"))
return `[$key]`
if (!VFrame.applicationResource)
return key
if (VFrame.applicationResource.language_texts)
let res = VFrame.applicationResource.language_texts[key];
if (res)
return format(res, args);
else
return `[$key]`
return key;
2. main.js 中 使用我们新建的 VFrame.js
上面我们说到 VFrame 的执行时机，我们可以看下面代码！
import Vue from "vue";
import App from "./App";
import store from "./store";
import router from "./router";
import VFrame from "./framework/VFrame";
Vue.prototype.l = VFrame.l;
// 这个为了方便用 VFrame ，并没有其他用途
Vue.prototype.$ux =
v: VFrame
// 重要的就是这一步，VFrame 的执行时机
VFrame.start().then(() =>
//set layout to store
store.commit("dragLayout/initLayout")
new Vue(
el: "#app",
router,
store,
render: h => h(App)
);
);3. html js 中使用我们配置好的多语言
Html 中使用: 【 l("Key") 】
<div> l('ManyLanguage') </div>
<el-form :model="item" :rules="tableRules">
<el-form-item :label="l("ManyLanguage")" prop="language">
<el-input v-model="item.language"></el-input>
</el-form-item>
</el-form>js 中使用: 【 this.l("Key") 】
export default
data()
return
language:this.l("ManyLanguage")
,
created()
console.log(this.l("MyLanguage"))
,
经过上面一番操作我们已经可以在管理系统中成功的调用当前多语言了；
那么我们 VFrame 中的 getAll() API 调用时 如何返回我们刚好我们想要的语言呢？
我们就要处理 【 request.js 】中的封装，在请求拦截中去携带我们自定义的请求头信息，后端大佬去对应的处理即可！
import Cookies from "js-cookie";
import axios from "axios";
axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";
// 创建axios实例
const service = axios.create(
// axios中请求配置有baseURL选项，表示请求URL公共部分
baseURL: process.env.VUE_APP_BASE_API,
// 超时
timeout: 120000
);
service.interceptors.request.use(
config =>
var cultureName = Cookies.get(CONSTANT.UX_LANGUAGE);
if (cultureName)
config.headers[CONSTANT.UX_LANGUAGE] = cultureName; // 让每个请求携带自定义token 请根据实际情况自行修改
)三、微信小程序中使用
实现步骤就像上面写的步骤一样，那么注意点是什么呢( 本文用的是uniapp去开发的微信小程序，也是基于 vue 的语法 )？
在 uniapp 里面我们不能写的像我们上面那样，因为 uniapp 是不支持的，那么这个时候我们如何去确保页面加载完成时，多语言可以全部返回呢？
答：做一个预加载页，当我们多语言成功返回以后跳转至业务页面
1. 完成上方基础 VFrame 创建，main.js 中挂载，但是不要在用 new vue 勿动(不然会报错)！
因为小程序有 Tabbar 所以我们的 VFrame.js 需要多一个方法；
import
request
from "util/request.js";
export default class VFrame
static applicationResource;
/**
* 在vue实例化之前调用异步start方法
*/
static start()
return new Promise((resolve, reject) =>
request(
url: '/application/getAppAll', //activityType=0 查询全部
method: 'GET',
hideLoading: true,
data:
orgId: uni.getStorageSync('companyOrgId')
).then(res =>
VFrame.applicationResource = res.data.result
resolve(res)
);
);
static l(key, args)
if (VFrame.applicationResource && VFrame.applicationResource.language_texts)
let res = VFrame.applicationResource.language_texts[key];
if (res)
return res;
else
return `[$key]`
return key;
static tabbarLanguage(tabbarList)
let language = uni.getStorageSync('language') || 'zh-CN'
if (language)
switch (language)
case 'en-GB':
tabbarList[0].text = "Coupons"
tabbarList[1].text = "Stamp"
tabbarList[2].text = "Account"
tabbarList[3].text = "Discount"
tabbarList[4].text = "Favourite"
break
case 'zh-CN':
tabbarList[0].text = "电子优惠券"
tabbarList[1].text = "电子印花"
tabbarList[2].text = "我的账户"
tabbarList[3].text = "优惠奖赏"
tabbarList[4].text = "我的最爱"
break
case 'zh-HK':
tabbarList[0].text = "電子優惠券"
tabbarList[1].text = "電子印花"
tabbarList[2].text = "我的賬戶"
tabbarList[3].text = "優惠獎賞"
tabbarList[4].text = "我的最愛"
break
return tabbarList
2. 预加载页面的制作
新建 preload.vue
<template>
<view class="preload">fashion-cue</view>
</template>
<script>
import mapMutations from 'vuex';
import VFrame from '@/util/VFrame';
export default
name: 'Preload', // 预加载动画页面
data()
return ;
,
methods:
...mapMutations(['setAppAll'])
,
onLoad(e)
console.log('onLoad', e);
VFrame.start().then(res =>
if (res && res.data.result.brandList && res.data.result.categoryList)
this.setAppAll(res.data.result);
getApp().globalData.isLoaded = true;
uni.switchTab(
url: e.redirect ? '/' + e.redirect : '/platforms/mp-weixin/discount/discount'
);
);
;
</script>
<style>
.preload
width: 100%;
font-weight: bold;
font-family: 'Arial', 'Microsoft YaHei', '黑体', '宋体', sans-serif;
font-size: 2.5rem;
text-align: center;
background-image: -webkit-linear-gradient(left, black, transparent 25%, black 50%, transparent 75%, black);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-background-size: 200% 100%;
-webkit-animation: masked-animation 2s infinite linear;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -140%);
@-webkit-keyframes masked-animation
0%
background-position: 0 0;
100%
background-position: -100% 0;
</style>
3. 切换语言
切换语言是再次调用我们的 VFrame.js 中的 start() 方法即可；
但是小程序切换要注意几个点：
① 自定义请求头的特殊处理
② 切换完成以后需要刷新当前页面
③ Tabbar 页面需要再 onShow 时处理
结语：
其实实现步骤略微有些繁琐，但是并不难，主要还是后端大佬的配合！
好了，本文到此结束，有需要的朋友可以私信~~~~~~~~
vuedata中使用i18n多语言配置-切换语言不生效-解决computed(代码片段)
...;建议我们将表达式写到computed属性里，不要写到data中使用<div>$t('k.state')</div>//可以动态改变data()returndyh:this.$t('k.state')//只能拿到 查看详情
ExtJS - 带有 i18n 文本的多语言
...ExtJS中更改语言的信息。是onthedev.sencha.com如我所见，他们使用locale/ext-lang-0.js文件。好的，太好了！但我也需要更改我自己的文本。例如，我有Ext.MessageB 查看详情
java中如何实现多语言切换
...国际化，需具备以下两个特征： 1、对于程序中固定使用的文本元素，例如菜单栏、导航条等中使用的文本元素、或错误提示信息，状态信息等，需要根据来访者的地区和国家，选择不同语言的文本为之服务。 2、对于程... 查看详情
vue项目中实现多语言国际化(i18n）
...方便调用第三步：main.js里引入i18n的配置第四步：在页面使用引入i18n以后，会全局注册一个变量$t平时我们取值都是name现在我们取值是$t(index.title)，index.title就是在语言里的属性哇哦，多语言是不是很简单，动起手来，赶紧试试... 查看详情
如何实现一个网站多个域名：目的是为了一个共同的前端+多个多语言实现的后端
...一个项目，共同完成一个大的产品，因此需要一个共同的前端……需要解决问题：1、一个前端分成多个模块，不同的模块可以使用不同的后端2、多个后端在前端实现上通过多个域名或者端口：这样不同的后端可以分别部署3、多... 查看详情
前端html页面如何实现多语言切换功能
需要语音翻译脚本库，html不能自动切换，但是浏览器自带语音切换还是无法实现多国语言翻译的。国内的电脑用户基本上是中文、简体繁体和英文切换，首先要搞清楚HTML逻辑，如果要改变网页文字内容要用如JQ的$("#id).html(&q... 查看详情
web网页多语言的实现方案_前端实现多语言切换
实现的效果需要在web中实现多语言的切换，当用户语言切换完成后下次重新打开网页，也是上次设置的语言进行显示。资源网站搜索大全https://55wd.com实现步骤1、在用户点击切换语言后，把选择的语言版本保存在cookie中 //写... 查看详情
如何在 Clojure 中编写多语言应用程序？
】如何在Clojure中编写多语言应用程序？【英文标题】：HowtowritemultilingualapplicationsinClojure?【发布时间】：2011-05-2714:31:05【问题描述】：我正在尝试弄清楚如何创建一个基于Compojure且支持多语言的网站。有没有像i18n之类的解决方... 查看详情
vue-i18n多语言搭配vuex的混合使用-案例(代码片段)
安装//安装vue-i18nnpminstall--savevue-i18n//安装js-cookienpminstall--savejs-cookie//安装vuexnpminstall--savevuex i18n封装将i18n引入与注册实例封装在了./langs/index.js中importVuefrom'vue';importVueI18nfrom'vue-i18 查看详情
#前后端国际化多语言配置(代码片段)
前后端国际化多语言配置前端（VueElementUI）项目前端使用Vue+Elementui编写i18n.js在这个js中引入ElementUI的多语言资源，引入本地的多语言资源//I18nimportVueI18nfrom'vue-i18n'importVuefrom'vue'importlocalefrom'element-ui/l... 查看详情
[sciter]:sciter如何使用i18实现桌面应用多语言切换及其利弊(代码片段)
#技术介绍使用i18，iframe#语言文件语言文件langs/en.js"文件加密系统":"Fileencrysystem","登录":"login","自动登录":"autoLog","记住密码":"keepPw&# 查看详情
多语言国际化(代码片段)
国际化多语言支持是现在系统通常都要具备的功能，Vue对国际化提供了很好的支持。1.安装依赖首先需要安装国际化组件，执行yarnaddvue-i18n命令，安装i18n依赖。2.添加配置在src下新建i18n目录，并创建一个index.js.importVuefrom‘vue‘im... 查看详情
ionic2基于ngx-translate实现多语言切换，翻译
...是箭头 https://github.com/ngx-translate/core将ngx-translate 使用与ionic2项目中，实现多语言的切换。1.安装ng2-translate在命令提示符中进入到项目目录下，输入以下回车。npminstallng2-translate-- 查看详情
在winform应用程序中快速实现多语言的处理--开发框架模块的整合(代码片段)
...语言处理方案的介绍，是指整合在开发框架中进行无缝的使用。1、多语言的处理步骤1）提取多语言处理JSON文件我们通过把程序界面 查看详情
如何在单个exe中嵌入多语言*.resx（或*.resources）文件？(代码片段)
有很多教程如何创建多语言RESX文件以及如何使用AL.exe创建附属程序集，但我还没有找到工作示例如何在单个EXE文件中嵌入RESX/Resources/satellite-DLL文件并分发整个多语言应用程序就像这样的EXE。我试图使用ilmerge.exe，但它看起来不... 查看详情
yii2api接口实现国际化多语言设置(代码片段)
1)在/config/main.php下添加如下代码：‘components‘=>[‘language‘=>‘zh-CN‘,‘i18n‘=>[‘translations‘=>[‘*‘=>[‘class‘=>‘yii\\i18n\\PhpMessageSource‘,‘basePath‘=>‘@application/messages‘,//ap 查看详情
tp多语言实现的一种方式(代码片段)
思路： 1，将模板中需要翻译的内容使用特定标签包裹。在加载模板的时候对制定标签进行翻译操作 2，建立翻译数据库，对要翻译的内容首先使用第三方api翻译并入库，对不合理的地方，进行人工更新。code： 1，sessi... 查看详情
vc2008以资源形式实现多语言版本(代码片段)
...自己开发的程序支持多语言不仅可以让自己的程序被国人使用，也能让外国程序爱好者使用。VC开发多语言程序有多种方法，或读取配置文件，或使用不同资源DLL等等。这里介绍以资源形式实现多语言版本。1.打开VisualStudio2008，... 查看详情