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改变语言