vue中多语言配置（繁体，简体，英文）

下载安装

npm i [email protected] -S

在views中创建文件夹
在main.js中引入

import i18n from './i18n/i18n'

new Vue({
    
    
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app') //手动挂载

在i18n.js中配置

import Vue from 'vue';
import VueI18n from 'vue-i18n'
import locale from 'element-ui/lib/locale';
import en from './langs/en';
import tw from './langs/tw';
import zh from './langs/zh';

import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import twLocale from 'element-ui/lib/locale/lang/zh-TW'

Vue.use(VueI18n)

//将数据配置好
const messages = {
    
    
    en: Object.assign(en, enLocale),
    zh: Object.assign(zh, zhLocale),
    tw: Object.assign(tw, twLocale),
}
const i18n = new VueI18n({
    
    
    locale: localStorage.lang || 'tw',
    messages, 
})
locale.i18n((key, value) => i18n.t(key, value)) //为了实现element插件的多语言切换

export default i18n

5.配置en.js和zh.js以及tw.js

//en.js
module.exports = {
    
    
    language: 'LANG',
    startAppointment: 'START',
    reportQuery: 'Report Enquiry',
    notices: 'Important Notes:',
    text1: 'COVID-19 serology antibody test is suitable for fully vaccinated persons (Note 1)',
}
//zh.js
module.exports = {
    
    
    language: '语言',
    userNameRule: '請輸入中文姓名',
}
//tw.js
module.exports = {
    
    
    language: '語言',
    startAppointment: '開始預約',
    reportQuery: '報告查詢',
}

现在可以直接在vue中使用了

<p> {
   
   {$t('language')}}</p>

注意：只适用于静态文件资源，如果需要后端数据转换三种语言，可以使用监听local storage来实现，拿取不同的字段，目前已经实现，如有需要，请私聊我

vue中多语言配置（繁体，简体，英文）

猜你喜欢