vue国际化（vue-i18n）

本是古典何须时尚 2022-11-28 10:47 212阅读 0赞

一、安装(npm安装)

npm install vue-i18n

二、配置（main.js文件配置）  
1、引入

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

2、在assets=>lang中新建en.js和zh.js  
![在这里插入图片描述][2020081713175283.png_pic_center]  
3、注册i18n实例并引入语言文件，文件格式等下解析

const i18n = new VueI18n({ 
      locale: 'en', // 语言标识
      messages: { 
        'zh': zhLocale,
        'en': enLocale
      }
    })

4、将i18n注入到vue实例中

new Vue({ 
    	  router,
    	  store,
    	  i18n,
    	  render: h => h(App)
    }).$mount('#app')

4、两个js文件

//zh.js
    import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
    export default{ 
    	allTitle:{ 
    	    moreBtn: '查看更多...',
    	    outBtn: '退出登录',
    	    accountBtn: '账号管理'
    	  },
    	...zhLocale
    }

//en.js
    import enLocale from 'element-ui/lib/locale/lang/en'
    export default{ 
    	allTitle:{ 
    	    moreBtn: 'Read More...',
    	    outBtn: 'Logout',
    	    accountBtn: 'account management'
    	  },
    	...enLocale
    }

三、页面渲染

//HTML文件需要加{ {}}
    <span>{ { $t('allTitle.moreBtn')}}</span>
    //js文件
    <el-input :placeholder="$t('allTitle.moreBtn')"></el-input>

点击语言进行切换  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYzMjI1Nw_size_16_color_FFFFFF_t_70_pic_center]

[2020081713175283.png_pic_center]: /images/20221124/61e3e6032a984aa29ec2a6c00c0652dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYzMjI1Nw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/cfe8412889c74484bc8563e93f148214.png

发表评论取消回复

表情：

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

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

相关阅读

相关 Vue+Element 国际化(i18n)

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

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

相关记录vue国际化i18n的使用

vue框架如果考虑多语言，可以使用vue-i18n，安装的话，直接通过npm install vue-i18n --save将依赖库加入到当前vue项目中。另外，我们需

末蓝、/ 2023年07月10日 08:06/ 0 赞/ 20 阅读

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

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

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

相关 vue-i18n国际化

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

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

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

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

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

相关 vue国际化（vue-i18n）

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

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

相关 vue-i18n实现国际化

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

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

相关 Springboot国际化i18n

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

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

相关使用vue-i18n进行项目国际化

vue-i18n方案文档简介安装 npm i -S vue-i18n 配置 cd project-path/src/ mk

雨点打透心脏的1/2处/ 2022年05月13日 01:06/ 0 赞/ 426 阅读

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

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

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