2024年最新教你如何在vue中使用国际化i18n插件_vue使用i18n,前端高级开发

最后

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

import Vue from 'vue'
import i18n from "./src/i18n/index.js"
new Vue({
	i18n
})

那么如何在视图中呈现呢,其实也很简单,我们只需要在插值中使用$t这个函数就可以了

<div id="app">
  <p>{{ $t("message.hello") }}</p>
</div>

最终展示的效果是

<div id="app">
 <p>hello world</p>
</div>

是不是很简单,当然这是咱们对i18n最基础的使用,如果想要更深入的使用,可以查看

开始 | Vue I18n​kazupon.github.io

2、在vue-cli项目中使用

2.1、创建i18n文件结构

我们首先在项目中src目录下建立一个叫做i18n的文件夹,路径为/src/i18n 当前的例子只提供两种语言(多了写的累-_-||),分别是en英文zh中文,格式如下建立就可以了,我们秉承着高内聚低耦合的思路,所以把原本i18n实例中messages中的属性进行模块化拆分为两个文件,如下图,都放置在config文件夹中

2.2、config中两个文件的内容定义

en.jszh.js我们可以先定义一些内容

en.js
export default {
    table: {//假如用于翻译表格
        date: "Date",
        name: "Name",
        address: "Address"
    },
    menu: {},//假如项目中日后还有菜单
    tabs: {}//tab切换等
}

zh.js
export default {
    table: {
        date: "日期",
        name: "姓名",
        address: "地址"
    },
    menu: {},
    tabs: {}
}

2.3、配置i18n文件夹下的index.js文件

目前我们已经对两个js文件进行了配置,接下来,我们来配置下/src/i18n/index.js文件,我们在开发过程中都知道,如果一个路由或者api有很多内容都写在一个文件,容易造成维护灾难,继续秉承高内聚低耦合的思路,我们和对项目中的路由或者api进行model划分,本文中的两个语言配置enzh也是划分模块,但是如果我们有20几个国家的语言需要翻译,我们在index中一个一个的import显然对开发效率来书是中灾难,我们的代码可能这样

import en from './config/en'
import id from './config/id'
import ja from './config/ja'
import ae from './config/ae'
import am from './config/am'
import ca from './config/ca'
import al from './config/al'
.....

为了解决这个问题,本文采用了webpack中的require.context方法来解决这个问题

2.4、使用require.context()

require.context是webpack提供的方法,用这个方法我们可以批量引入我们想要的文件,require.context可以返回一个具有 resolve, keys, id 三个属性的方法

  1. resolve() 它返回请求被解析后得到的模块 id
  2. keys() 它返回一个数组,由所有符合上下文模块处理的请求组成
  3. id 是上下文模块里面所包含的模块 id. 它可能在你使用 module.hot.accept 的时候被用到

这个方法接受3个参数

  1. dir传入一个目录进行搜索
  2. child是否要搜索子目录
  3. regExp传入正则表达式来匹配哪些文件需要引入
let langFiles = require.context("./config", false, /\.js$/);

当我们调用kes()方法的时候可以得到如下属性

let langFiles = require.context("./config", false, /\.js$/);
console.log(langFiles.keys())//["./cn.js","./zh.js"]

以上便是require.context的简单使用,如果想要知道更详细的用法,那我后续会再开一期关于require.context的专题,敬请期待

2.5、继续配置/src/i18n/index.js

下面的代码中我使用了一个正则表达式

let reg = /^\.\/([^\.]+)\.([^\.]+)$/ //正则用于匹配文件名

用这个正则的目的是为了,我们需要将数据处理成这样

{
    zh:{...},
    en:{...}
}

处理成这种i18nmessage属性对应的数据模式,我们通过forEach获取下来的key是这种类型的./zh.js使用正则的目的就是截取其中的zh两个字符,然后生成复合message属性的数据模型

import Vue from "vue"
import VueI18n from "vue-i18n"
Vue.use(VueI18n)//注入到所有的子组件

//require.context(path,deep,regExp)
//有3个方法 分别是keys() 


let langFileds = require.context('./config', false, /\.js$/)

let regExp = /\.\/([^\.\/]+)\.([^\.]+)$/ //正则用于匹配 ./en.js中的'en'

// regExp.exec('./en.js')

let messages = {} //声明一个数据模型,对应i18n中的message属性

langFileds.keys().forEach(key => {
    let prop = regExp.exec(key)[1] //正则匹配en|zh这样的值
    //messages[prop]相当于 messages['en'] = {table:{...}}
    messages[prop] = langFileds(key).default

})
console.log(messages);
console.log(langFileds('./en.js'));

let locale = localStorage.getItem('lang') || "zh" //从localstorag中获取

export default new VueI18n({
    locale,//指定语言字段
    messages//定义语言字段
})

2.6、修改main.js

下面我们将i18n挂载在main的Vue实例,本案例中也引入了element-ui,如果想要使用element-ui,需要先安装

yarn add element-ui

接下来根据自己的需求编写代码

import Vue from 'vue'
import App from './App.vue'
import ElementUI from "element-ui" //element-ui
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.use(ElementUI)

import i18n from "./i18n" //

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


2.7、 App.vue视图展示(navigator.language)

总结

技术学到手后,就要开始准备面试了,找工作的时候一定要好好准备简历,毕竟简历是找工作的敲门砖,还有就是要多做面试题,复习巩固。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

2.7、 App.vue视图展示(navigator.language)

总结

技术学到手后,就要开始准备面试了,找工作的时候一定要好好准备简历,毕竟简历是找工作的敲门砖,还有就是要多做面试题,复习巩固。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-WQ9Bu7yZ-1715081407554)]

  • 4
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3使用vue-i18n进行国际化配置的步骤如下: 1. 安装vue-i18n包: ```shell npm install vue-i18n ``` 2. 创建i18n实例: 在项目的根目录下创建一个`i18n.js`文件,并在其导入`vue-i18n`包,然后创建一个新的`VueI18n`实例并导出它。可以根据需要配置语言包和其他选项。 ```javascript // i18n.js import { createI18n } from 'vue-i18n' const i18n = createI18n({ locale: 'en', // 默认语言 messages: { en: { // 英文语言包 // ... }, zh: { // 文语言包 // ... } } }) export default i18n ``` 3. 在main.js配置i18n使用: 在`main.js`文件导入刚刚创建的`i18n`实例,并将其作为Vue应用的插件进行注册。 ```javascript // main.js import { createApp } from 'vue' import App from './App.vue' import i18n from './i18n' createApp(App).use(i18n).mount('#app') ``` 4. 在HTML使用国际化文本: 在Vue组件的模板,可以使用`$t`方法来获取国际化文本。例如: ```html <template> <div> <p>{{ $t('message') }}</p> </div> </template> ``` 5. 在JS使用国际化文本: 在Vue组件的JavaScript代码,可以使用`$t`方法来获取国际化文本。例如: ```javascript export default { methods: { showMessage() { console.log(this.$t('message')) } } } ``` 6. 修改语言(和获取当前语言): 可以使用`$i18n.locale`来获取或设置当前的语言。例如: ```javascript // 获取当前语言 console.log(this.$i18n.locale) // 修改语言为文 this.$i18n.locale = 'zh' ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值