需求:多语言网站,网络提示错误信息也需要支持多语言切换,一般i18n在.vue文件中的模板里按照api调用就可以了。
那么在.js文件中如何使用呢?
譬如:我封装的axios请求文件
只需要看步骤1、2、3、4
// request.js
import axios from 'axios'
import { Message } from 'element-ui'
// 1.还是需要引入vue-i18n插件
import VueI18n from 'vue-i18n'
// 2.定义中英文语言包
const messages = {
en: {
message: {
connectionServerFailed: 'Connection to server failed'
}
},
zh: {
message: {
connectionServerFailed: '连接服务器失败'
}
}
}
export function getLanguage() {
const chooseLanguage = Cookies.get('language')
if (chooseLanguage) return chooseLanguage
const language = (navigator.language || navigator.browserLanguage).toLowerCase()
const locales = Object.keys(messages)
for (const locale of locales) {
if (language.indexOf(locale) > -1) {
return locale
}
}
return 'zh'
}
// 3.实例化一个i18n对象
const i18n = new VueI18n({
locale: getLanguage(), // 语言标识
messages: messages // 上面自己定义的语言包
})
// 创建axios实例
const service = axios.create({
baseURL: process.env.url_api, // api 即在config下的index.js中设置proxy设置跨域配置的地址(dev开发的时候打开)
timeout: 60 * 1000 // 请求超时时间设置
})
// request 拦截器
service.interceptors.request.use(
config => {
// 请求发送前的设置
if (store.getters.token) {
config.headers['token'] = getToken()
}
return config
},
error => {
console.log(error) // for debug
return Promise.reject(error)
}
)
// response 拦截器
service.interceptors.response.use(
response => {
const res = response.data
// 如果返回后端定义的code不是 1 ,就视为一个错误返回.
if (res.success !== 1) {
Message({
message: res.errMsg || 'Error',
type: 'error',
duration: 5 * 1000
})
if (res.errCode === 'err.token.outtime') { // token超时
store.dispatch('user/resetToken').then(() => {
location.reload()
})
}
return Promise.reject(res || 'Error')
} else {
return res
}
},
error => {
console.log('err' + error) // for debug
if (error && error.response) {
switch (error.response.status) {
case 400:
error.message = '请求错误'
break
case 401:
error.message = '未授权,请登录'
break
case 403:
error.message = '拒绝访问'
break
case 404:
error.message = `请求地址出错: ${error.response.config.url}`
break
case 408:
error.message = '请求超时'
break
case 500:
error.message = '服务器错误'
break
case 502:
error.message = '网络错误'
break
case 503:
error.message = '服务不可用'
break
case 504:
error.message = '网络超时'
break
default: error.message = `连接错误`
}
} else {
// 4.在需要使用多语言的地方调用即可。
error.message = i18n.tc('message.connectionServerFailed')
}
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service