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

srcmain.js

srclocalesindex.js

srclocaleszh_CN.json

srcutilsconfig.js

# srcmain.js

import i18n from ‘@/locales/index.js’

new Vue({

el: ‘#app’,

i18n,

router,

store,

render: h => h(App)

})

# srclocalesindex.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

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

}

Vue.use(VueI18n)

const i18n = new VueI18n({

locale,

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

messages: data

})

export default i18n

# srclocaleszh_CN.json

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

{

“欢迎登录”: “欢迎登录”,

“参数配置”:”参数配置”,

“折价币种”:”折价币种”

}

调用方法 :

{{ $t(‘欢迎登录’) }}

# srcutilsconfig.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

文章知识点与官方知识档案匹配，可进一步学习相关知识Vue入门技能树首页概览23402 人正在系统学习中 相关资源：MinionProfitsTracker:随着市场价格波动,轻松识别最赚钱的奴才[在…