在有一定数量前端项目上线并扩大到一定规模后,可能会遇到有外国友人使用我们的产品,但因为语言不通,无法让我们的产品对其产生深度服务。这时候就需要 i18n(国际化)来解决多种语言显示在一个 codebase 内的情况,而在 vue 项目中,我们通常使用 vue-i18n来进行项目的国际化。 安装 // 使用npm npm install vue-i18n...
而且如今的 chatgpt 等软件已经让优质批量化翻译变得简单易用,这篇文章就简单讲讲如何使用多语言框架 vue-i18n 在vue 项目中添加多语言。 安装 在vue 项目中使用如下进行安装: npm install vue-i18n 框架部署 在项目中部署 vue-i18n 比较坑,因为内网和外网大部分关于 vue-i18n 的教程都有点过时了,而且并没有...
vue-i18n 是一个vue插件,主要作用就是让项目支持国际化多语言。首先我们引入这个插件: import Vuefrom'vue'import Vue18nfrom'vue-i18n'Vue.use(Vuei18n); vue插件的使用方法,通过全局方法Vue.use()使用插件。 插件通常会为Vue添加全局功能。插件的范围没有限制-一般有下面几种:添加全局方法或者属性;添加全局资源...
首先,我开发是以 vue 为技术栈,所以如题用的国际化插件是 vue-i18n,附上github 传送门。 1、我们得先有开发环境,先有项目跑起来,我推荐如果是喜欢用 vue 的小伙伴,可以尝试 vue-cli 官方脚手架。这边有我整理的一个脚手架demo,有助于你快速的进行 vue 模块化开发。 2、我们需要安装 vue-i18n, 推荐 npm ...
在lang 下创建 index.js,使用如上的两种语言包。 import Vue from "vue"; import VueI18n from 'vue-i18n' import zn from "./zn" import en from "./en" Vue.use(VueI18n); // 全局注册国际化包 // 准备翻译的语言环境信息 const i18n = new VueI18n({ ...
目录 一、安装 vue-i18n 二、语言包 三、全局注册 四、别名配置 五、静态页面国际化 六、动态路由国际化 一、安装 vue-i18n npm install vue-i18n@9.1.9 1. 二、语言包 创建src/lang 语言包目录,中文语言包 zh-cn.ts,英文语言包 en.ts,和index.ts ...
大家好,我是 Gopal。目前就职于 Shopee,一家做跨境电商的公司,因为业务涉及到多个国家,所以我们各个系统都会涉及到国际化翻译。Vue I18n是 Vue.js 的国际化插件,它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中。 本文的源码阅读是基于版本8.24.4进行 ...
Element Plus 提供了一个 Vue 组件ConfigProvider用于全局配置国际化的设置。 这里配合pinia实现国际化切换 使用ConfigProvider 组件 全局配置国际化 import{ElConfigProvider}from'element-plus'import{useAppStore}from'@/store/modules/app'constappStore=useAppStore()<template><el-config-provider:locale="appStore.loca...
Vue国际化 vue-i18n 一、示例 [Vue国际化代码示例](https://github.com/libing-cheer/vue-international-i18n)代码下载后运行以下命令，即可跑起来看到效果。npm run serve 二、目录结构 - 📁src @根 - 📁assets 静态资源目录 - 📁common 字体库 - 📄cn.js 中文字体库 - 📄en.js 英文字体库 - ...
笔者目前在 Shopee 工作,我们公司主要业务是跨境电商,业务涉及到多个国家,所以我们各个系统都会涉及到国际化翻译。我们 Vue 项目技术上采用了 Vue-i18n 这个库。