html5 语音包,在vue中使用vue-i18n按需加载语言包

1.新建目录结构如下：

.

├── App.vue

├── assets

│   └── langs

│ ├── en

│ │ └── index.js

│   ├── zh

│ │ └── index.js

│   └── index.js

├── components

│   └── HelloWorld.vue

├── main.js

└── store.js

2.assets/langs/index.js内容如下：

import Vue from 'vue'

import VueI18n from 'vue-i18n'

import axios from 'axios'

Vue.use(VueI18n)

export const i18n = new VueI18n({

// locale: 'zh', // 设置语言环境

messages:{

// 'zh':messages

} // 设置语言环境信息

})

const loadedLanguages = [] // 我们的预装默认语言

function setI18nLanguage (lang) {

i18n.locale = lang

axios.defaults.headers.common['Accept-Language'] = lang

document.querySelector('html').setAttribute('lang', lang)

return lang

}

export function loadLanguageAsync (lang) {

if (i18n.locale !== lang) {

if (!loadedLanguages.includes(lang)) {

return import(/* webpackChunkName: "lang-[request]" */ `@/assets/langs/${lang}/index.js`).then(msgs => {

i18n.setLocaleMessage(lang, msgs.default)

loadedLanguages.push(lang)

return setI18nLanguage(lang)

})

}

return Promise.resolve(setI18nLanguage(lang))

}

return Promise.resolve(lang)

}

3.在main.js中使用

//main.js

import Vue from 'vue'

import App from './App'

import store from './store'

import { i18n } from './assets/langs'

Vue.config.productionTip = false

window.app = new Vue({

store,

i18n,

render: h => h(App)

}).$mount('#app')

4.loadLanguageAsync是实际用于更改语言的函数。比如在路由钩子中获取到当前语言环境加载对应语言包

beforeEnter(to, from, next){

let lang = localStorage.getItem(lang)||'zh';

lang=to.query.lang||lang;

localStorage.setItem('lang',lang)

loadLanguageAsync(lang).then(() => next());

}

关于找一找教程网

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

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

[在vue中使用vue-i18n按需加载语言包]http://www.zyiz.net/tech/detail-123933.html