vue3+vite配置多语言i18n

302 阅读1分钟

image.png

第一步安装i18n

npm install vue-i18n -D 第二步在src目录下创建i18n文件

import { createI18n } from 'vue-i18n'
import EN from './en'
import CN from './cn'

const message = {
  cn: {
    ...CN,
  },
  en: {
    ...EN,
  },
}

const i18n = createI18n({
  locale: 'en', // 设置语言类型
  legacy: false, // 如果要支持compositionAPI,此项必须设置为false;
  globalInjection: true, // 全局注册$t方法
  messages: message,
})

export default i18n

创建EN.js和CN.js

image.png

配置like this

export default {
   platform: '平台',
   locations: '地点',
   network: '网络',
   integrations: '综合',
   enterprise: '企业',
   pricing: '定价',
   contact: '联系我们',
   signIn: '注册'
}
export default {
    platform: 'Platform',
    locations: 'Locations',
    network: 'Network',
    integrations: 'Integrations',
    enterprise: 'Enterprise',
    pricing: 'Pricing',
    contact: 'Contact',
    signIn: 'Sign In'
 }