主要由以下几个模块组成由：

src\main.js

src\locales\index.js

src\locales\zh_CN.json

src\utils\config.js

# src\main.js

import i18n from '@/locales/index.js'

new Vue({

el: '#app',

i18n,

router,

store,

render: h => h(App)

})

# src\locales\index.js

import Cookies from 'js-cookie'

import VueI18n from 'vue-i18n'

import Vue from 'vue'

const data = {}

const locale = Cookies.get('hb_lang') || 'en_US'

const readDir = ['en_US', 'zh_CN', 'th_TH']

for (let i = 0; i < readDir.length; i++) {

data[readDir[i]] = require(`./${readDir[i]}.json`)

}

Vue.use(VueI18n)

const i18n = new VueI18n({

locale,

fallbackLocale: locale, // 语言环境中不存在相应massage键时回退到指定语言

messages: data

})

export default i18n

# src\locales\zh_CN.json

示例项目包涵中英泰三国语言, 这里仅抽出中文作为示例 :

{

"欢迎登录": "欢迎登录",

"参数配置":"参数配置",

"折价币种":"折价币种"

}

调用方法 :

# src\utils\config.js

import Cookies from 'js-cookie'

import i18n from '@/locales/index.js'

const Key = 'hb_lang'

export function get() {

return Cookies.get(Key)

}

export function set(data) {

i18n.locale = data

return Cookies.set(Key, data)

}

export function remove() {

return Cookies.remove(Key)

}

其中 , 当需要动态切换语言时，调用 set 方法即可，例如:

import { set as setLanguage } from '@/utils/config.js'

setLanguage('en_US')

关于找一找教程网

本站文章仅代表作者观点，不代表本站立场，所有文章非营利性免费分享。

本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章，希望广大程序员努力学习，让我们用科技改变世界。

[Vue项目中使用国际化，并配置动态切换语言的方法]http://www.zyiz.net/tech/detail-140766.html

html5 切换语言,Vue项目中使用国际化，并配置动态切换语言的方法相关推荐

mybatis手动切换数据库_在Spring项目中使用 Mybatis 如何实现动态切换数据源
在Spring项目中使用 Mybatis 如何实现动态切换数据源发布时间:2020-11-17 16:20:11 来源:亿速云阅读:108 作者:Leah 这篇文章将为大家详细讲解有关在Sprin ...
Vue项目中750设计稿px自动转化成rem方法（小白一个，记录自己遇到的小白问题，大家勿怪）
一.首先下载 postcss-pxtorem 运行npm install postcss-pxtorem 完成下载之后,在package.json文件中添加这段代码 "postcss&quo ...
前端报错如何在服务器中显示,详解Vue项目中出现Loading chunk {n} failed问题的解决方法...
最近有个Vue项目中会偶尔出现Loading chunk {n} failed的报错,报错来自于webpack进行code spilt之后某些bundle文件lazy loading失败.但是这个问题 ...
14.i18n在vue项目中使用(国际化)
i18n:i18n是 Internationalization 这个英文的简写,即国际化的意思,vue-i18n是一款针对于vue开发的国际化插件,让项目支持多语言切换,以适应不同地区用户的需求. 1 ...
vue项目中引入阿里 iconfont 图标动态渲染导航菜单图标
vue + element 后台项目,项目中都是用的 element-ui 的图标但是导航菜单是通过后台数据渲染的,所以在阿里图标库找了图标给后台,再渲染步骤一: 在图标库找到想要的图标,加入购物 ...
vue项目中svg图（svg标签）的使用方法
几天前,ui无法把我拉进项目iconfont库,只好切了一份svg图包给我,于是琢磨了怎么用,简单地记录一下其实所在项目什么都配置好了,真正用到的只有最后一项 1. 安装依赖 npm install ...
vue项目中eslint规则校验配置
新建.eslintrc.js文件,复制下面代码,将文件放到项目根目录即可 module.exports = {root: true,parser: 'vue-eslint-parser', env: ...
Vue项目中出现Loading chunk {n} failed问题的解决方法
由于项目里面用到了vue-router,vue-router的错误处理函数 onError 是不是能够捕获该错误呢?我们来看一下官方文档的说明: 当在渲染一个路由的过程中,需要尝试解析一个异步组件时发 ...
html引vue怎么实现国际化,Vue项目中Vue-i18n和element-ui国际化开发实现过程_唇印_前端开发者...
在开发,但是在前面博客中,如果项目中使用了element-ui插件,插件中的语言文字替换可以结合element-ui插件一同进行.element-ui插件自身也提供了语言包.具体的配置和使用方法参考如 ...
前端框架Vue——vue-i18n ，vue项目中如何实现国际化，$t的用法
前端框架Vue--vue-i18n ,vue项目中如何实现国际化,$t的用法 vue中html页面写入$t('')怎么显示

html5 切换语言,Vue项目中使用国际化，并配置动态切换语言的方法

{{ $t('欢迎登录') }}

html5 切换语言,Vue项目中使用国际化，并配置动态切换语言的方法相关推荐

最新文章

热门文章

html5 切换语言,Vue项目中使用国际化， 并配置动态切换语言的方法

{{ $t('欢迎登录') }}

html5 切换语言,Vue项目中使用国际化， 并配置动态切换语言的方法相关推荐

最新文章

热门文章

html5 切换语言,Vue项目中使用国际化，并配置动态切换语言的方法

html5 切换语言,Vue项目中使用国际化，并配置动态切换语言的方法相关推荐