nuxt项目使用i18n实现多语言（包含element多语言配置）

1、安装依赖        npm i vue-i18n
2、创建存放语言的json文件

3、在plugins目录下面创建i18n.js文件

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import enLocale from 'element-ui/lib/locale/lang/en'

Vue.use(VueI18n)

const pathArray = document.location.pathname.split('/')
let pathname = ''
pathArray.forEach(v => {
	if (v && v !== 'enroll') {
		pathname = v
	}
})

export default ({ app, store }) => {
	app.i18n = new VueI18n({
		locale: store.state.locale, // 根据自己需求存取，不一定存store
		fallbackLocale: localStorage.getItem('lang_' + pathname) === 'en' ? 'en' : 'sc',
		messages: {
			en: {
				...require('~/locales/en.json'),
				...enLocale
			},
			sc: require('~/locales/sc.json'),
			tc: require('~/locales/tc.json')
		},
		silentFallbackWarn: true
	})
	app.i18n.path = link => {
		if (app.i18n.locale === app.i18n.fallbackLocale) {
			return `/${link}`
		}
		return `/${app.i18n.locale}/${link}`
	}
}

4、最后再nuxt.config.js中引入

export default {
    plugins:[
        { src: '~/plugins/i18n.js', ssr: false },    
    ]
}

这就好啦。

 

下面说一下element里面的翻译配置
在element-ui.js配置文件

import Vue from 'vue'
import Cookie from 'js-cookie'
import Element from 'element-ui'
import VueI18n from 'vue-i18n'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import enLocale from 'element-ui/lib/locale/lang/en'
import tcLocale from 'element-ui/lib/locale/lang/zh-TW'
import ElementLocale from 'element-ui/lib/locale'

const lang = Cookie.get('locale')
Vue.use(VueI18n)
const i18n = new VueI18n({
  locale: lang === 'en' ? 'en' : lang === 'tc' ? 'tc' : 'sc',
  messages: {
    en: Object.assign(require('~/locales/en.json'), enLocale),
    tc: Object.assign(require('~/locales/tc.json'), tcLocale),
    sc: Object.assign(require('~/locales/sc.json'), zhLocale),
  },
})
ElementLocale.i18n((key, value) => i18n.t(key, value))

Vue.use(Element, {
  i18n: (key, value) => i18n.t(key, value),
})