vue安装vue-i18n语言切换

左手的ㄟ右手 2022-11-07 11:37 191阅读 0赞

第一步

npm install vue-i18n --save-dev

第二步

在项目的入口文件main.js中引入vue-i18n插件

import VueI18n from 'vue-i18n'
    Vue.use(VueI18n)
    const i18n = new VueI18n({
     locale: 'zh', // 语言标识
     messages: {
      'zh': require('./assets/lang/zh'), 例如：zh.js的路径
      'en': require('./assets/lang/en')   例如：en.js的路径
     }
    })
    
    new Vue({
     el: '#app',
     i18n,
     router,
    })

第三步

/**zh.js文件**/
    module.exports = {
     menu : {
       home:"首页"
     },
     content:{
       main:"这里是内容"
     }
    }
    
    /**en.js文件**/
    module.exports = {
     menu : {
       home:"home"
     },
     content:{
       main:"this is content"
     }
    }

语法注意：

1）在标签内作为正文内容
    <div class="title">{
       {$t('menu.home')}}</div>
    
    2）作为标签属性使用
    <input :placeholder="$t('content.main')" type="text">
    
    3)作为js中文字使用时
    console.log(this.$t('content.main'));
    
    4)`${this.$t('content.main')}`

第四步

页面上进行中英文切换，在中英文切换的按钮上绑定事件，如下

tabEn: function () {
     this.$i18n.locale = 'en'
    },
    tabCn: function () {
     this.$i18n.locale = 'zh'
    }

发表评论取消回复

表情：

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

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

相关阅读

相关 vue3和ts使用i18n实现国际化与动态切换语言

![63dc935a9ae346b9bfa4f80764482ff0.png][]i18n官网：[Installation | Vue I18n][Installation _

女爷i/ 2023年10月12日 12:32/ 0 赞/ 20 阅读

相关使用 vue-i18n 切换中英文

vue-i18n 仓库地址：https://github.com/kazupon/vue-i18n 兼容性：支持 Vue.js 2.x 以上版本安装方法：

不念不忘少年蓝@/ 2022年12月13日 14:29/ 0 赞/ 248 阅读

相关 vue多语言插件vue-i18n

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

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

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

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

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

相关 Vue-i18n 实现中英文切换

中英文切换先安装依赖 `npm install vue-i18n` 创建文件在根目录新建i18n文件 `langs/cn.js` mo

雨点打透心脏的1/2处/ 2022年10月19日 12:59/ 0 赞/ 190 阅读

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

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

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

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

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

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

相关 vue中使用 vue-i18n 切换中英文

兼容性：支持 Vue.js 2.x 以上版本安装方法： npm install vue-i18n 1、准备本地的翻译信息 const messag

小灰灰/ 2021年12月19日 23:51/ 0 赞/ 296 阅读

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

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

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

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

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

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