Vue i18n简单用法

淩亂°似流年 2023-06-08 06:43 90阅读 0赞

###### Vue i18n 是 Vue.js 的国际化插件。它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中。 ######

更多详细的用法，参考 [Vue I18n官网文档][Vue I18n]

个人认为 Vue i18n 很有用，所以用博客记录一下，方便以后查找使用  
![在这里插入图片描述][2019101713495238.png]

**HTML**

<script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
    
    <div id="app">
      <p>{
       { $t("message.hello") }}</p>
    </div>

**JavaScript**

// 如果使用模块系统 (例如通过 vue-cli)，则需要导入 Vue 和 VueI18n ，然后调用 Vue.use(VueI18n)。
    // import Vue from 'vue'
    // import VueI18n from 'vue-i18n'
    //
    // Vue.use(VueI18n)
    
    // 准备翻译的语言环境信息
    const messages = { 
      en: { 
        message: { 
          hello: 'hello world'
        }
      },
      ja: { 
        message: { 
          hello: 'こんにちは、世界'
        }
      }
    }
    
    // 通过选项创建 VueI18n 实例
    const i18n = new VueI18n({ 
      locale: 'ja', // 设置地区
      messages, // 设置地区信息
    })
    
    
    // 通过 `i18n` 选项创建 Vue 实例
    new Vue({  i18n }).$mount('#app')
    
    // 现在应用程序已经准备好了！

**结果如下：**

<div id="#app">
      <p>こんにちは、世界</p>
    </div>

[Vue I18n]: https://kazupon.github.io/vue-i18n/zh/started.html#html
[2019101713495238.png]: /images/20230531/ef359b48b18d4f2c892e1860892b317c.png

发表评论取消回复

表情：

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

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

相关阅读

相关 Vue+Element 国际化(i18n)

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

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

相关 vue i18n

vue-i18n 是一个为 Vue.js 应用提供国际化支持的插件。它可以让你在应用中使用不同语言的内容，并提供了一系列的 API 来管理和切换语言。你可以在应用中配置默认语言

今天药忘吃喽~/ 2024年03月25日 06:02/ 0 赞/ 200 阅读

相关 vue-i18n 国际化

1.安装vue-i18n npm install vue-i18n -S 2.注册到Vue import Vue from 'vue';

客官°小女子只卖身不卖艺/ 2023年06月19日 09:33/ 0 赞/ 33 阅读

相关 Vue i18n简单用法

Vue i18n 是 Vue.js 的国际化插件。它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中。更多详细的用法，参考 [Vue I18n官网文档][

淩亂°似流年/ 2023年06月08日 06:43/ 0 赞/ 91 阅读

相关 vue中使用vue-i18n 一个简单的国际化操作

1.安装：npm install vue-i18n --save-dev 2.在main.js文件中引入： import VueI18n from 'vue-i18

太过爱你忘了你带给我的痛/ 2023年06月02日 10:37/ 0 赞/ 77 阅读

相关用vue-i18n实现中英文切换国际化

安装 `npm install vue-i18n` 目录结构 ![在这里插入图片描述][20200710110401571.png] i18n.js

ゞ浴缸里的玫瑰/ 2023年02月25日 02:21/ 0 赞/ 28 阅读

相关 vue-i18n国际化

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

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

相关 vue国际化（vue-i18n）

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

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

相关 vue-i18n.js_使用vue-i18n在Vue.js中实现i18n

vue-i18n.js Today we’ll cover how to implement i18n, internationalization, in our Vue a

阳光穿透心脏的1/2处/ 2022年11月27日 04:29/ 0 赞/ 271 阅读

相关 vue-i18n实现国际化

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

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