国际化 i18n,前端切换中英文模式

安装i18n包，全局引入

import i18n from '@/locales'

创建locales.js文件

index.js作为入口文件

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import { LOCALE_LANG, DEFAULT_LANG } from '@/utils/const'Vue.use(VueI18n)const locales = {zh: {...require('./zh.json')},en: {...require('./en.json')},
}const i18n = new VueI18n({locale: DEFAULT_LANG,messages: locales
})
export const setup = (lang) => {if (!lang) {lang = window.localStorage.getItem(LOCALE_LANG) || DEFAULT_LANG}window.localStorage.setItem(LOCALE_LANG, lang)Object.keys(locales).forEach(lang => {document.body.classList.remove(`lang-${lang}`)})document.body.classList.add(`lang-${lang}`)document.body.setAttribute('lang', lang)Vue.config.lang = langi18n.locale = lang
}export default i18n

在en.json和zh.json中编辑要改变的文本

main.js引入并使用

import i18n from '@/locales'

在需求改变的页面中引入方法

import { setup } from "@/locales";在mounted中调用，传入需要的语言this.setup(this.lang)

最后模板使用

 <div>{{ $t("FAQsText") }}</div>

国际化 i18n,前端切换中英文模式相关推荐

windows下安装python的i18n_python国际化(i18n)和中英文切换
[1.到Flex SDK3.2的bin下运行命令:copylocale en_US zh_HK 2.在flex project下创建一个文件夹locale(与src同目录),在locale下分别创建e ...
项目国际化I18N多语言切换
作为国际化的门户网站,支持多种不同的语言,以方便不同国家,不同语种的用户访问尤其重要,目前通过Vue I18n已实现中英文自由切换. 一.了解I18N 1.什么是I18N i18n(其来源是英文单词 ...
Vue国际化处理 vue-i18n 以及项目自动切换中英文
0. 直接上预览链接 Vue国际化处理 vue-i18n 以及项目自动切换中英文 1. 环境搭建命令进入项目目录,执行以下命令安装vue 国际化插件vue-i18n npm install vue ...
SpringBoot国际化失败的原因，切换中英文无效
现象:在尝试国际化的过程中,无法切换中英文,一直显示中文. 原因:在配置类中,配置LocaleResolver时,方法名出错 @Configuration public class SpringBoo ...
前端一键切换深色模式
切换主题色传统方式是切换css包获取用less,sass定义变量控制主题色,复杂而且不易维护: 推荐一个插件 Darkmode.Js,一键切换深色模式使用方法引入Darkmode.Js,有两种方式 ...
springMVC项目国际化(i18n)实现方法
SpringMVC项目国际化(i18n)实现方法按照作息规律,每周五晚必须是分享知识的时间\(^o^)/~,这周讲点儿啥呢,项目需要逼格,咱们国际化吧(*￣rǒ￣)~,项目中碰到这类需求的童鞋可能并 ...
javaweb学习总结(三十一)——国际化(i18n)
一.国际化开发概述软件的国际化:软件开发时,要使它能同时应对世界不同地区和国家的访问,并针对不同地区和国家的访问,提供相应的.符合来访者阅读习惯的页面或数据. 国际化(internationaliz ...
使用 vue-i18n 切换中英文
使用 vue-i18n 切换中英文 vue-i18n 仓库地址:https://github.com/kazupon/vue-i18n 兼容性: 支持 Vue.js 2.x 以上版本安装方法:(此处 ...
深入分析JavaWeb Item22 -- 国际化(i18n)
一.国际化开发概述软件的国际化:软件开发时,要使它能同时应对世界不同地区和国家的访问,并针对不同地区和国家的访问,提供相应的.符合来访者阅读习惯的页面或数据. 国际化(internationaliz ...

国际化 i18n,前端切换中英文模式

安装i18n包，全局引入

创建locales.js文件

main.js引入并使用

import i18n from '@/locales'

在需求改变的页面中引入方法

最后模板使用

国际化 i18n,前端切换中英文模式相关推荐

最新文章

热门文章