uniapp多语言实现（一）

不念不忘少年蓝@ 2021-07-26 16:26 989阅读 0赞

## uniapp多语言切换 ##

**main.js**

import Vue from 'vue'    
    import App from './App'    
    import VueI18n from 'vue-i18n'    
    
    Vue.use(VueI18n)    
    
    const i18n = new VueI18n({     
      locale: 'en-US',    
      messages: {     
        'en-US': {     
          index: {     
            invite: 'Invite',    
            game: 'Game'    
          }    
        },    
        'zh-CN': {     
          index: {     
            invite: '邀请',    
            game: '游戏'    
          }    
        }    
      }    
    })    
    
    Vue.prototype._i18n = i18n    
    Vue.prototype.$i18nMsg = function(){   
        return i18n.messages[i18n.locale]  
    }  
    
    const app = new Vue({     
      i18n,    
      ...App    
    })    
    app.$mount()

**index.vue**

<template>  
        <view class="content">  
            <view class="content-title">{ {  i18n.index.invite }}</view>  
        </view>  
    </template>  
    
    <script>  
        export default {   
            data() {   
                return {   
                    title: 'Hello'  
                }  
            },  
            computed: {   
                i18n() {   
                    return this.$i18nMsg()  
                }  
            },  
            onLoad() {   
                setTimeout(() => {   
                    this.$i18n.locale = 'zh-CN'  
                },2000)  
            },  
            methods: {   
    
            }  
        }  
    </script>  
    
    <style lang="stylus" rel="stylesheet/stylus">  
        .content-title  
            color #500778 
    </style>

发表评论取消回复

表情：

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

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

相关阅读

相关 nagios添加多语言实现

cgi.cfg配置修改如下： locale\_lang\_path=/usr/local/nagios/share/locale locale\_lang\_u

向右看齐/ 2022年09月20日 05:46/ 0 赞/ 121 阅读

相关 uniapp实现主题切换

主要的思路就是通过vuex，全局scss实现 > 例如主题分为白天和暗黑主题(light/dark) > vuex new Vuex.Store({

系统管理员/ 2022年09月15日 11:47/ 0 赞/ 437 阅读

相关【Uniapp】Uniapp 实现 App 版本自动升级

文章目录一、App 版本自动升级 1、Uniapp 前端实现 2、SpringBoot 后端实现微信公众号一、App 版本

忘是亡心i/ 2022年08月31日 15:24/ 0 赞/ 1168 阅读

相关 MFC多语言实现方法

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

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

相关 Android实现多语言切换

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

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

相关 android 多语言的实现

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

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

相关 c语言实现多态

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

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

相关 Silverlight多语言的实现

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

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

相关 uniapp多语言实现（二）

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

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

相关 uniapp多语言实现（一）

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

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