vue多语言插件vue-i18n

Bertha 。 2022-12-01 15:56 182阅读 0赞

#### 安装vue-i18n ####

> npm install vue-i18n -S

#### 使用 ####

###### 1.在main.js中引入vue-i18n ######

import VueI18n from 'vue-i18n'
    Vue.use(VueI18n)

###### 2.vue-i18n初始化 ######

const i18n = new VueI18n({ 
      locale: 'cn', // 默认语言
      messages
    })

###### 3.vue-i18n挂载到vue实例 ######

new Vue({ 
      el: '#app',
      router,
      i18n, // i18n
      template: '<App/>',
      components: {  App }
    })

###### 4.定义语言文件，使用 ######

const messages = { 
      //简体中文
      cn: { 
        message: { 
          hello: '你好',
          author: '龙的传人'
        }
      },
      //英文
      en: { 
        message: { 
          hello: 'Hello',
          author: 'Chinese'
        }
      },
      // 繁体中文
      tw: { 
        message: { 
          hello: '你好',
          author: '龍的傳人'
        }
      }
    }

*  vue模板文件中使用

<h1>{ {  $t("message.hello") }}</h1>

*  js中使用

computed:{ 
        hello(){ 
           return this.$t("message.hello") + this.$t("message.author");
        } 
    }

###### 5.切换语言 ######

切换英文

this.$i18n.locale = 'en'

###### 6.单独定义语言文件 并加载到vue-i18n初始化中 ######

// cn.js
    export default { 
      message: { 
        hello: '你好',
        author: '龙的传人'
      }
    }
    // en.js
    export default { 
      message: { 
        hello: 'Hello',
        author: 'Chinese'
      }
    }
    import cnlang from './lang/cn.js'
    import enlang from './lang/en.js'
    const i18n = new VueI18n({ 
      locale: 'cn', // 默认语言
      messages: { 
      	'cn': cnlang,
    	'en': enlang
      }
    })

引用来自文章

> http://www.imooc.com/article/262994

发表评论取消回复

表情：

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

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

相关阅读

相关 vue项目用i18n实现多语言国际化

1.下载vue-i18n包 `npm install vue-i18n --save` package.json会出现如下内容 ![在这里插入图片描述][wate

淡淡的烟草味﹌/ 2023年06月06日 10:44/ 0 赞/ 118 阅读

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

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

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

相关 vue多语言插件vue-i18n

安装vue-i18n > npm install vue-i18n -S 使用 1.在main.js中引入vue-i18n import VueI1

Bertha 。/ 2022年12月01日 15:56/ 0 赞/ 183 阅读

相关 vue安装vue-i18n语言切换

第一步 npm install vue-i18n --save-dev 第二步在项目的入口文件main.js中引入vue-i18n插件 import

左手的ㄟ右手/ 2022年11月07日 11:37/ 0 赞/ 173 阅读

相关 springMVC-多语言I18n

springMVC增加多语言，Java默认的多语言配置文件后缀为properties。这里记录一种可从properties文件中查找key或从xml文件中查询key的配置方式。

秒速五厘米/ 2022年09月24日 14:22/ 0 赞/ 173 阅读

相关 vue+i18n实现全局语言切换

1.安装i18n npm install vue-i18n 2.新建中英文文案配置项 ![70][] 中文版： module.exports =

青旅半醒/ 2022年05月21日 08:26/ 0 赞/ 239 阅读

相关 npm插件-i18n-autoinsert

1.自定义插件的初衷最近在开发angularjs项目中使用到了国际化，例如html里有段是这样的 <h1 class="page-header" [trans

约定不等于承诺〃/ 2022年04月17日 00:22/ 0 赞/ 235 阅读

相关 vue实现多语言项目（vue-i18n）

首先安装vue-i18n依赖（npm） npm install vue vue-i18n --save vue-i18n官方文档地址：[http://kazup

￡神魔★判官ぃ/ 2022年02月03日 12:57/ 0 赞/ 383 阅读

相关 vue动态加载VueI18n实现国际化

vue动态加载VueI18n实现国际化前言编写后端工程编写前端工程前言前一段时间给大家写了一个基于spring boot和ivi

傷城~/ 2021年10月14日 18:39/ 0 赞/ 867 阅读

相关 vue实现多语言项目（vue-i18n）

安装vue-i18n 我们使用npm安装vue-i18n。 npm install vue vue-i18n --save 在vue项目src文件夹下新建一

朱雀/ 2021年07月26日 17:27/ 0 赞/ 543 阅读