vue手写多语言配置

1.先建立对应的language目录如下图.

2.其中footer.js,header.js和publicLanguage.js都是一些demo文案

建立多个js可以对应各个组件或者页面的文案方便维护. 3.index.js的作用就是一次性将page下的js和publicLanguage合并起来，然后根据key值遍历循环对应生成对应的正确的文案。（如果是多页面可以改进一下）

import Vue from 'vue'
import cookies from 'vue-cookies'
import publicLanguage from './publicLanguage.js'
let common = publicLanguage
const requireLanguage = require.context(
  './pages',
  false,
  /\w+\.js$/
)
requireLanguage.keys().forEach(fileName => {
  const pageLanguage = requireLanguage(fileName)
  common = {
    en: {
      ...common.en,
      ...pageLanguage.default.en
    },
    zh: {
      ...common.zh,
      ...pageLanguage.default.zh
    }
  }
})

let myLanguage = cookies.get('language') || 'en'
Vue.prototype._ = function () {
  let strArr = [...arguments] || 'nomsg'
  let key = strArr[0]
  let str = common[myLanguage][key]
  if (strArr.length > 1) {
    for (let index = 1; index < strArr.length; index++) {
      str = str.replace(`{${index - 1}}`, strArr[index])
    }
  }
  return str || '没有对应的文字'
}

4.main.js 导入文件

require('@/language/index.js')

5.结果

通过cookies改变语言