uniapp多语言实现（二）

忘是亡心i 2021-07-26 17:38 566阅读 0赞

> 项目引入vue-i18n实现国际化多语言，vue-i18n包 自行下载，放到libs目录下，在main.js中引入

//main.js
    import Vue from 'vue'
    import App from './App'
    //多语言引入
    import VueI18n from './libs/vue-i18n'
    import en from './common/js/en.js'//英文
    import cn from './common/js/cn.js'//中文
    Vue.use(VueI18n)
    const i18n = new VueI18n({ 
    	locale: 'cn', //当前语言中文;
    	// locale:'en',
    	messages: { 
    		'en': en,
    		'cn': cn,
    	}
    })
    Vue.prototype._i18n = i18n
    Vue.config.productionTip = false
    App.mpType = 'app'
    const app = new Vue({ 
        i18n,
        ...App
    })
    app.$mount()

> uniapp 不支持在取值表达式中直接调方法，因此，$t方法不可用，所以通过计算属性的方式：

<template>  
    	<view>  
        	<text>{ {  i18n.login }}</text>  
    	</view>  
    </template>  
    
    <script>  
    export default {   
    	computed: {   
    		i18n () {   
    			return this.$t('message')  
    		}  
    	}  
    }  
    </script>

> 切换语言

data() { 
    	return { 
    		current: this.$i18n.locale == 'cn' ? 'cn' : 'en',//判断是中文还是英文
    	}
    },
    methods: { 
    	//点击事件切换语言
    	radioChange(e){ 
    		if(e.detail.value === 'cn'){ 
    			this.$i18n.locale = 'cn';
    			this.current = 'cn';
    		}else{ 
    			this.$i18n.locale = 'en';
    			this.current = 'en';
    		}
    	},
    }

> cn.js，en.js结构如下

//cn
    export default { 
        message: { 
            home:"首页",
    	}
    }
    
    //en
    export default { 
        message: { 
            home:"home",
    	}
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，566人围观）

还没有评论，来说两句吧...

相关阅读

相关 WPF 实现多语言

1、编写Chinese.xml，English.xml文件 2.、在项目的App.xml文件中 <Application.Resources>

「爱情、让人受尽委屈。」/ 2024年01月08日 13:19/ 0 赞/ 51 阅读

相关（最简单，详细，直接上手）uniapp/vue中英文多语言切换

官方文档 [uni-app官网][uni-app] 1.安装 npm install vue-i18n --save 2.体会多语言切换 [hello

太过爱你忘了你带给我的痛/ 2023年10月09日 14:49/ 0 赞/ 56 阅读

相关 uniapp二维码

[uqrcode.js][] <canvas canvas-id="qrcode" style="width: 300rpx;height: 300rpx;" />

喜欢ヅ旅行/ 2022年09月11日 11:21/ 0 赞/ 229 阅读

相关 MFC多语言实现方法

我们公司目前软件大多数用MFC单文档实现，前段时间为了海外扩展，要求所以软件采用多语言。因此我给下属下了一个命令，就是归纳多语言实现方式，总结最优实现方式。

绝地灬酷狼/ 2022年08月02日 07:30/ 0 赞/ 305 阅读

相关 Android实现多语言切换

前言，最近要实现多语言切换需求，在网上查了很多资料，基本实现了想要的效果。主要代码：优化前（此段逻辑在华为P系列个别机型上会出现语言混乱的情况）： Conf

悠悠/ 2022年05月22日 03:22/ 0 赞/ 689 阅读

相关 android 多语言的实现

[Android:多语言对应][Android] 我们建好一个android 的项目后，默认的res下面有layout、values、drawable等目录这些都是

系统管理员/ 2022年04月10日 11:50/ 0 赞/ 315 阅读

相关 c语言实现多态

c语言实现多态的原理核心基于函数指针，用结构体进行封装例子（教程上的，还不错） include "stdafx.h" include <i

梦里梦外;/ 2022年03月17日 09:48/ 0 赞/ 354 阅读

相关 Silverlight多语言的实现

1. 新建一个Resouce文件，就叫"MyStrings.resx" 　　2. 在VS双击这个资源文件，右上角有一个下拉框：Access Modifier，改成Public

刺骨的言语ヽ痛彻心扉/ 2021年12月23日 14:53/ 0 赞/ 285 阅读

相关 uniapp多语言实现（二）

> 项目引入vue-i18n实现国际化多语言，vue-i18n包自行下载，放到libs目录下，在main.js中引入 //main.js import Vu

忘是亡心i/ 2021年07月26日 17:38/ 0 赞/ 567 阅读

相关 uniapp多语言实现（一）

uniapp多语言切换 main.js import Vue from 'vue' import App from './App'

不念不忘少年蓝@/ 2021年07月26日 16:26/ 0 赞/ 1016 阅读