UNI-APP开发之Vue + i18n实现国际化

短命女 2022-12-23 09:33 304阅读 0赞

首先，介绍下项目结构，如图：![这里写图片描述][SouthEast]

1.在i18n/lang下编写json文件。

//zh_CN.json
    {"message":{"hello": "关于"}}
    //en.json
    {"message":{"hello": "about"}}

2.i18n/index.js 国际化配置文件

import VueI18n from 'vue-i18n'//需先安装vue-i18n
    import Vue from 'vue'
    
    Vue.use(VueI18n)
    
    var langMessages = {
     cn: require('./lang/cn.json'),
     en: require('./lang/en.json')
    }
    var i18n = new VueI18n({
      locale: 'cn',
      messages: langMessages
    })
    export default i18n

3.main.js中引入i18n以及配置文件

import i18n from './i18n' //引入配置文件
    
    new Vue({
        el: '#app',
        router,
        i18n: i18n,   //实例中 引用国际化
        template: '<App/>',
        components: { App },
    });
    
    /*
    //1s后更改语言
    setTimeout(function(){
        i18n.locale = "en"
    },1000)
    */

4.在html中应用

//建议此方法
    <span v-text="$t('message.hello')"></span>
    //or
    <p>{
       { $t("message.hello") }}</p>

完！！！

[SouthEast]: /images/20221120/40bd4fe74afa419a8693c3f1c8562f0f.png

发表评论取消回复

表情：

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

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

相关阅读

相关 Vue+Element 国际化(i18n)

第一步：安装 i18n 这里为了让 Element 兼容，安装的是 8 版本的 npm install vue-i18n@8 第二步：在 src 目录

￡神魔★判官ぃ/ 2024年04月08日 09:32/ 0 赞/ 90 阅读

相关 java使用i18n实现国际化

概述：国际化也称作i18n，其来源是英文单词 internationalization的首末字符i和n，18为中间的字符数。由于软件发行可能面向多个国家，对于不同国家的用户，软

谁借莪１个温暖的怀抱￠/ 2024年03月24日 13:30/ 0 赞/ 106 阅读

相关 vue+elementUI+vue-i18n实现国际化

1.安装: npm install vue-i18n 2.vue.js+vue-i18n+elementUI国际化配置在main.js同级建i18n文件夹，并里面

灰太狼/ 2023年06月30日 08:50/ 0 赞/ 53 阅读

相关 vue-i18n国际化

文章目录 vue-i18n 安装使用 vue-i18n Vue i18n国际化多语言适配安装 cnpm ins

比眉伴天荒/ 2022年12月29日 00:30/ 0 赞/ 314 阅读

相关 UNI-APP开发之Vue + i18n实现国际化

首先，介绍下项目结构，如图：![这里写图片描述][SouthEast] 1.在i18n/lang下编写json文件。 //zh_CN.json {"mess

短命女/ 2022年12月23日 09:33/ 0 赞/ 305 阅读

相关 vue-i18n国际化使用，vue-elementui中使用vue-i18n国际化多语言工具

vue-i18n国际化使用，vue-elementui中使用vue-i18n国际化多语言工具 ![在这里插入图片描述][20200916152218585.gif_pic

桃扇骨/ 2022年12月07日 15:12/ 0 赞/ 469 阅读

相关 vue国际化（vue-i18n）

一、安装(npm安装) npm install vue-i18n 二、配置（main.js文件配置） 1、引入 import Vue from 'vu

本是古典何须时尚/ 2022年11月28日 10:47/ 0 赞/ 227 阅读

相关 vue-i18n实现国际化

需求如果项目需要国际化，即点击按钮切换中/英文。那么就需要引入 vue-i18n 插件安装首先创建项目 `vue init webpack <项目名>

傷城~/ 2022年10月29日 09:24/ 0 赞/ 293 阅读

相关 SpringMvc国际化i18n

所谓国际化就是支持多种语言，web应用在不同的浏览环境中可以显示出不同的语言，比如说汉语、英语等。下面简单说一下Springmvc下的i18n的国际化配置：

墨蓝/ 2022年07月16日 15:10/ 0 赞/ 312 阅读

相关 Springboot国际化i18n

Springboot国际化i18n 前言国际化（internationalization）是设计和制造容易适应不同区域要求的产品的一种方式。它要求从产品中抽离所有

秒速五厘米/ 2022年05月15日 04:36/ 0 赞/ 649 阅读