i18n插件实现国际化和按需加载翻译(单页面web应用)
1.安装插件包
npm i -S vue-i18n
2.项目目录
project-dir
-dist
-src
-components
-vue-i18n.vue
-i18n // 设置文件
-index.js
-lang // 翻译文件所在的位置
-app-en.js
-app-in.js
-app-cn.js
-router
-index.js
main.js
App.vue
复制代码
3.i18n/index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n);
// 1. 创建一个新的 VueI18n 实例
export const i18n = new VueI18n({
silentTranslationWarn: true
})
// 2. 创建一个 loadedLanguages 数组,它将跟踪我们加载的语言
const loadedLanguages = []
// 3. 创建一个 setI18nLanguage 函数,它将实际更改 vueI18n 实例、axios 以及其它需要本地化的地方。
function setI18nLanguage (lang) {
i18n.locale = lang
// axios.defaults.headers.common['Accept-Language'] = lang
document.querySelector('html').setAttribute('lang', lang)
return lang
}
// 4. loadLanguageAsync 是实际用于更改语言的函数。加载新文件是通过import功能完成的,import 功能由 Webpack 慷慨提供,它允许我们动态加载文件,并且因为它使用 promise,我们可以轻松地等待加载完成。
export function loadLanguageAsync (lang) {
if (i18n.locale !== lang) {
if (!loadedLanguages.includes(lang)) {
return import(/* webpackChunkName: "lang-[request]" */ `@/lang/app-${lang}`).then(msgs => {
console.log(msgs.default)
i18n.setLocaleMessage(lang, msgs.default)
loadedLanguages.push(lang)
return setI18nLanguage(lang)
})
}
return Promise.resolve(setI18nLanguage(lang))
}
return Promise.resolve(lang)
}
复制代码
4.main.js
import {i18n} from '@/i18n'
new Vue({
el: '#app',
router,
i18n,
components: { App },
template: '<App/>'
}
复制代码
5.***.vue
<template>
<div class="i18n">
<div class="content">
{{$t('reg_button_register')}}
</div>
<button @click="chooseLanguage('cn')">cn</button>
<button @click="chooseLanguage('en')">en</button>
<button @click="chooseLanguage('in')">in</button>
</div>
</template>
<script>
import { loadLanguageAsync } from "@/i18n";
export default {
mounted(){
this.chooseLanguage('cn');
},
methods: {
chooseLanguage(lang) {
localStorage.setItem("lang", lang);
loadLanguageAsync(lang);
}
}
}
</script>
复制代码
VueI18n的参数
locale
指定默认的语言,也就是Laravel会默认先从这个配置指定的语言里找相应的语言, fallback_locale
如果locale中的值不存在,就从fallback_locale
里找。比如你locale
设置为cn
, 但如果翻译不全面,这时候en 的fallback_lcoale
对应的语言文件中有,那么此时就会显示英文的文本,而不是为空。
- src/lang目录下的国际化文件,须将key写为字符窜形式,否则警告: