如何利用vue+vue-i18n进行国际化开发

最新推荐文章于 2024-09-30 14:28:41 发布

进击的小前端...

最新推荐文章于 2024-09-30 14:28:41 发布

阅读量365

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/GuXiaos_18/article/details/127415216

版权

本文详细介绍了如何在Vue项目中利用vue-i18n进行国际化开发，包括安装依赖、创建语言包、在页面中应用翻译内容，并提供了两种不同的文本插入方式，以提高代码可读性和维护性。

摘要由CSDN通过智能技术生成

如何利用i18n进行国际化开发

时隔多日，我又来更新我的博客了。这次主要是来分享一下，之前在一家小公司当前端的技术点分享。

这次呢，主要分享一下如何通过vue项目实现国际化开发

第一步：

我们需要先在项目中安装vue-i18n的依赖

npm install vue-i18n

第二步

需要在src文件夹里面新建一个文件夹放我们的lang文件和js文件
在这里插入图片描述
lang文件夹下是根据项目需求配置的语言包，而且要是json格式方便读取
index.js则是读取lang文件夹下的语言包

第一种读取语言包中的json文件
index.js:

// index.js

import vue from "vue";
import VueI18n from "vue-i18n";
vue.use(VueI18n)

// 获取语言
const requireComponent = require.context(
    // 其组件目录的相对路径
    './lang',
    // 是否查询其子目录
    true,
    // 匹配基础组件文件名的正则表达式
    /[a-zA-Z]\w+\.(json)$/
)
let messages = new Object();
requireComponent.keys