language语言配置

安装

npm install vue-i18n@next

src 新建 language 文件夹

• index.js

// 语言
import { createI18n } from 'vue-i18n'
const i18n = createI18n({
  locale: 'en', // 默认语言
  messages: {
    ch: require('./ch.js'),
    en: require('./en.js')
  }
})
export default i18n

• ch.js

module.exports = {
  // 左侧菜单栏
  aside_menu: {
    home: '主页',
    news: '新闻',
    role: '权限',
    user: '用户',
    about: '关于'
  },
  // 头部菜单
  header_menu: {
    logout: '退出'
  }
}

• en.js

module.exports = {
  // 左侧菜单栏
  aside_menu: {
    home: 'home',
    news: 'news',
    role: 'role',
    user: 'user',
    about: 'about'
  },
  // 头部菜单
  header_menu: {
    logout: 'sign out'
  }
}

main.js

// 语言
import VueI18n from './language'

index.vue

• 使用

$t(`aside_menu.${title}`)

• 设置

// 语言
import { useI18n } from 'vue-i18n'
// 扩展语言
const { locale } = useI18n({ useScope: 'global' })
// 设置语言
const toggleLang = (lang) => {
  locale.value = lang
  state.lang_current = lang
}