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/

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/8494