在vue中使用vue-i18n按需加载语言包
2020/4/3 14:01:20
本文主要是介绍在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()); }
参考vueI18n地址如下:https://kazupon.github.io/vue...
这篇关于在vue中使用vue-i18n按需加载语言包的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-05HTML 颜色
- 2024-10-05HTML 颜色名
- 2024-10-01AntDesign-Form-rules学习:轻松入门教程
- 2024-10-01classnames学习:轻松掌握前端中的类名管理
- 2024-09-30前端案例资料:新手入门必读教程
- 2024-09-30前端编程资料:新手入门必备教程
- 2024-09-30前端培训资料:新手入门必读教程
- 2024-09-30滚动吸顶项目实战:从入门到上手
- 2024-09-29HTML学习:span标签教程详解
- 2024-09-29HTML基础:button标签教程