# Vue 2国际化与TypeScript的结合
在现代Web开发中,国际化(i18n)是一个不可忽视的功能。它帮助我们将应用程序本地化,以适应不同文化和地区的用户。在这篇文章中,我们将探讨如何在 Vue 2 中使用 TypeScript 实现国际化功能。我们将详细介绍配置过程,并提供示例代码以帮助您更好地理解。
## 安装依赖
首先,您需要安装 `vue-i18n` 库,这是 Vue 应用            
                
         
            
            
            
            vue-i18n 多语言(国际化) 切换 初学使用不少网站有多语言模式,正好项目里需要多语言切换,简单学习之后,整理成文章,加深记忆。概述Vue I18n 是 Vue.js 的国际化插件,格局比较大,具体怎么解释还是不太好说,直接看用法就能明白。简单说一下为什么叫这个名字:internationalization(i+中间的18个字母+n)。如果你更喜欢看官方文档可以移步下面的官方文档,本文只是基            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-02-05 00:25:54
                            
                                446阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            在src目录下面建立语言包common下的ch.jsmodule.exports = {    messag            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2022-08-19 11:38:54
                            
                                190阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            1. 前言
前端框架无数,其中几种热门的框架都有相匹配的国际化插件工具,如下:
vue + vue-i18n
angular + angular-translate
react + react-intl
jquery + jquery.i18n.property
2. 国际化实现
2.1 安装插件首先在项目中安装 vue-i18n 依赖包,这里使用NPM进行安装,如果没有科学上网请使用C            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2021-07-13 15:59:03
                            
                                1045阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            vue-i18n一、安装1、直接下载 / CDNhttps://unpkg.com/vue-i18n/dist/vue-i18nunpkg.com 提供了基于 NPM 的 CDN 链接。上面的链接会一直指向在 NPM 发布的最新版本。你也可以通过 https://unpkg.com/vue-i18n@8.9.0/dist/vue-i18n.js 这样的 URL 指定版本号或者 tag。在 Vue            
                
         
            
            
            
            这是我参与更文挑战的第 19 天,活动详情查看:更文挑战 1. 前言 前端框架无数,其中几种热门的框架都有相匹配的国际化插件工具,如下: 2. 国际化实现 2.1 安装插件 首先在项目中安装 vue-            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2022-01-16 14:31:24
                            
                                1024阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            相对于网站等一些需求 我们有需要做国际化的需求,具体步骤如下: 首先安装 vue-i18n npm in            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2022-10-19 21:08:36
                            
                                153阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            1、安装 vue-i18n + js-cookie 插件npm install vue-i18n -S
npm install js-cookie --save即在package.json中dependencies节点添加vue-i18n"vue-i18n": "7.3.2",2、配置多语言文件src目录下创建lang目录,存放国际化文件此处包含三个文件,分别是 index.js zh.js en            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2023-11-12 08:57:33
                            
                                275阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            0. 直接上 预览链接Vue国际化处理 vue-i18n 以及项目自动切换中英文1. 环境搭建命令进入项目目录,执行以下命令安装vue 国际化插件vue-i18nnpm install vue-i18n –save2. 项目增加国际化翻译文件在项目的src下添加lang文件夹增加中文翻译文件(zh_CN.js)以及英文翻译文件(EN.js),里面分别存储项目中需要翻译的信息。lang文件获取地址3            
                
         
            
            
            
            在当今全球化的背景下,应用程序国际化变得尤为重要,尤其是对于 Vue.js 应用程序。Vue国际化架构方案是为了使应用能够根据用户的语言和地区偏好自动调整界面展示。本文将详细介绍这一过程,包括背景、技术原理、架构解析、源码分析和性能优化。尤其是对于开发者来说,掌握 Vue 国际化框架的实现是至关重要的。
## 背景描述
在过去的几年中,随着互联网的迅猛发展,越来越多的企业开始面向国际市场。这使            
                
         
            
            
            
            需求提的比较着急,匆忙看了一些相关文章就开始上手,踩了些坑,不过好歹是完成了。前提一般来说,语言环境存储在本地还是服务器上是个值得根据产品来思考的事情。
最开始,我是把用户设置的语言存储在 cookies 和 localstorage 中,当用户刷新的时候,可以保持当前的语言不变。
出现的问题是当用户手动清除了浏览器的缓存,那么语言就会设置为初始值,不过经过产品的讨论,认为这样是可以接受的。
            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-08-09 19:56:28
                            
                                569阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            1.国际化1、 国际化原理 ? 什么是国际化 ?同一款软件 可以为不同用户,提供不同语言界面 ---- 国际化软件需要一个语言资源包(很多properties文件            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2022-01-05 16:06:43
                            
                                175阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            有时候我们访问国际性的网站,发现有个语言切换的功能:若选择“简体中文”,页面显示语言为简体中文;若选择“繁体中文”,页面显示语言为繁体中文;若选择“英语”,页面显示语言为英语。这是怎么实现的呢?靠配置文件。在这个配置文件里,通常选英语为基础语言,再与别的语言配对,以达到多种语言国际化的目的。比如,简体中文国际化的配置文件中的内容是这样的:China=中国Province=广东            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2022-08-04 07:03:03
                            
                                41阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            Struts2国际化 一、简介所谓国际化是指你的web系统,在不同国家或地区被访问,其中的一些主要信息,如注册信息中字段,同...            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2022-12-15 13:44:31
                            
                                60阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            在struts2中需要做国际化的有:
jsp页面的国际化,action错误信息的国际化,转换错误信息的国际化,校验错误信息的国际化
在之前的例子中已经做过和国际化相关的例子了,在struts.xml中配置过
<constant name="struts.custom.i18n.resources" value="message"></constant>
其中的messa            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2013-07-03 16:17:00
                            
                                131阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            1:java内置的国际化     java内置的国际化,以java.util.ResourceBundle和java.ut            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2022-09-12 01:16:32
                            
                                84阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            1.  国际化与本地化程序国际化已成为Web应用的基本要求。随着网络的发展,大部分的Web站点面对的已经不再是本地或者本国的浏览者,而是来自全世界各国各地区的浏览者,因此国际化成为了Web应用不可或缺的一部分。国际化Internationalization是使程序在不做任何修改的情况下,就可以在不同的国家或地区和不同的语言环境下,按照当地的语言和格式习惯显示字符。例如,一个数字            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2023-04-23 10:57:44
                            
                                78阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            软件的本地化:一个软件在某个国家或者地区使用时,采用该国家或者地区的语言,数字,货币,日期等习惯。 软件的国际化:软件在开发时,让它能支持多个国家和地区的本地化应用。使得应用软件能够适应多个地区的语言和文化风俗习惯。 要用struts实现国际化和本地化,首先要定义资源文件的名称,这个文件会包含默认语            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2016-09-20 22:03:00
                            
                                80阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            jsp页面的国际化,action错误信息的国际化,转换错误信息的国际化,校验错误信息的国际化
在之前的例子中已经做过和国际化相关的例子了,在struts.xml中配置过
 
view plaincopy to clipboardprint?
    <constant name="struts.c...            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2012-02-25 08:38:41
                            
                                27阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            前言: 要实现多语言切换,这时候接触到国际化,前端框架无数,其中几种热门的框架都有相匹配的国际化插件工具。比如:vue + vue-i18n
angular + angular-translate
react + react-intl
jquery + jquery.i18n.property在实际项目中使用的前端框架为Vue,故而我们将使用vue-i18n这个插件进行国际化功能的实现。效果