电商系统中实现国际化
摘要：在中我们需要⽀持多种语⾔切换，满⾜国际化需求。 vue-i18n是⼀个vue插件，主要作⽤就是让项⽬⽀持国际化多语⾔，使⽤⽅便快捷，能很轻松的将我们的项⽬国际化。主要介绍使⽤vue-i18n实现切换中英⽂效果。
⼀、先安装vue-i18n
使⽤npm安装vue-i18n
npm install vue vue-i18n --save
⼆、引⼊vue-i18n
在main.js⾥引⼊vue-i18n和相关⽤到的⽂件
import Vue from 'vue'
import 'babel-polyfill'
import 'normalize.css/normalize.css' // A modern alternative to CSS resets
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import UIComponents from 'ui-components'
import EnComponents from '@/components'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import '@/styles/index.scss' // global css
import App from './App'
import router from './router'
import store from './store'
import i18n from './lang' // Internationalization
import './icons' // icon
import './permission' // permission control
// 全局注册echarts、jsonp
import echarts from 'echarts'
import axios from 'axios'
// register global utility filters.
import * as filters from './filters' // global filter
// register global utility mixins.
import mixin from './utils/mixin'
import * as API_Common from './api/common'
import Cookies from 'js-cookie'
Vue.use(Element, {
size: 'small',
i18n: (key, value) => i18n.t(key, value)
})
Vue.use(UIComponents)
Vue.use(EnComponents)
Vue.use(VueAwesomeSwiper)
Vue.prototype.$echarts = echarts
Vue.prototype.$http = axios
Vue.prototype.$message.success = function(text) {
Vue.prototype.$message({
showClose: true,
message: text,vue element admin
type: 'success',
duration: 5000
})
}
Vue.prototype.$ = function(text) {
Vue.prototype.$message({
showClose: true,
message: text,
type: 'error',
duration: 5000
})
}
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
})
Vue.mixin(mixin)
('adminLanguage') || 'zh').then(response => {
new Vue({
el: '#app',
beforeCreate() { this.$i18n.('adminLanguage') || 'zh', response) },    router,
store,
i18n,
template: '<App/>',
components: { App }
})
}).catch(() => {
('设置语⾔失败，请刷新页⾯重试！')
new Vue({
el: '#app',
router,
store,
i18n,
template: '<App/>',
components: { App }
})
})
三、从后台获取语⾔包数据
1.新建⽂件夹lang并在⾥index.js⾥引⼊vue-i18n并且创建带有选项的 VueI18n 实例
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Cookies from 'js-cookie'
Vue.use(VueI18n)
const messages = {
}
const i18n = new VueI18n({
locale: ('adminLanguage') || 'zh', // set locale
messages // set locale messages
})
export default i18n
注意：⽂中有js-cookie 实例中加载了从后台请求过来的语⾔包
2.在vuex store⾥modules新建APP.js⾥切换的时候，根据语⾔加载各个国家的语⾔
import Cookies from 'js-cookie'
const app = {
state: {
sidebar: {
opened: !+('adminSidebarStatus'),
withoutAnimation: false
},
device: 'desktop',
language: ('adminLanguage') || 'zh'
},
mutations: {
TOGGLE_SIDEBAR: state => {
if (state.sidebar.opened) {
Cookies.set('adminSidebarStatus', 1)
} else {
Cookies.set('adminSidebarStatus', 0)
}
state.sidebar.opened = !state.sidebar.opened
state.sidebar.withoutAnimation = false
},
CLOSE_SIDEBAR: (state, withoutAnimation) => {
Cookies.set('adminSidebarStatus', 1)
state.sidebar.opened = false
state.sidebar.withoutAnimation = withoutAnimation
},
TOGGLE_DEVICE: (state, device) => {
state.device = device
},
SET_LANGUAGE: (state, language) => {
state.language = language
Cookies.set('adminLanguage', language)
}
},
actions: {
toggleSideBar({ commit }) {
commit('TOGGLE_SIDEBAR')
},
closeSideBar({ commit }, { withoutAnimation }) {
commit('CLOSE_SIDEBAR', withoutAnimation)
},
toggleDevice({ commit }, device) {
commit('TOGGLE_DEVICE', device)
},
setLanguage({ commit }, language) {
commit('SET_LANGUAGE', language)
}
}
}
export default app
3.在utils⾥新建⽂件转换a.title，⽤于⾯包屑侧边栏标签视图
export function generateTitle(title) {
return this.$t('route.' + title) // $t :this method from vue-i18n ,inject in @/lang/index.js
}
4.在utils⾥新建⽂件request.js 在request⽅法⾥加 如果是刷新token或者登录，不需要检查token直接请求语⾔包
export default function request(options) {
console.log(11, options)
// 如果是刷新token或者登录，不需要检查token直接请求。
if (options.url.indexOf('systems/admin-users/login') + options.url.indexOf('systems/admin-users/token') + options.url.indexOf('validator') + options.url.indexOf('lan    // console.log(options.url + ' | 请求的刷新token或是登录，不需要检查token直接请求。')
return service(options)
}
return new Promise((resolve, reject) => {
checkToken(options).then(() => {
service(options).then(resolve).catch(reject)
})
})
}
四、根据vuex切换语⾔动态加载语⾔包
<script>
import * as API_Common from '../../api/common'
export default {
computed: {
language() {
return this.$s.language
}
},
methods: {
handleSetLanguage(lang) {
Language(lang).then(async response => {
this.$i18n.setLocaleMessage(lang, response)
await this.$nextTick()
this.$i18n.locale = lang //通过切换locale的值来实现语⾔切换
this.$store.dispatch('setLanguage', lang)
this.$message({
message: lang === 'zh' ? '语⾔切换成功' : 'switch language success',
type: 'success'
})
})
}
}
}
</script>
五、页⾯使⽤
{{$t('1')}}
vue 组件form表单使⽤ :label="$t('1')"

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。