主要由以下几个模块组成由 ：

  • src\main.js
  • src\locales\index.js
  • src\locales\zh_CN.json
  • src\utils\config.js

# src\main.js

import i18n from '@/locales/index.js'new Vue({  el: '#app',  i18n,  router,  store,  render: h => h(App)})

# src\locales\index.js

import Cookies from 'js-cookie'import VueI18n from 'vue-i18n'import Vue from 'vue'const data = {}const locale = Cookies.get('hb_lang') || 'en_US'const readDir = ['en_US', 'zh_CN', 'th_TH']for (let i = 0; i < readDir.length; i++) {  data[readDir[i]] = require(`./${readDir[i]}.json`)}Vue.use(VueI18n)const i18n = new VueI18n({  locale,  fallbackLocale: locale, // 语言环境中不存在相应massage键时回退到指定语言  messages: data})export default i18n

# src\locales\zh_CN.json

示例项目包涵中英泰三国语言, 这里仅抽出中文作为示例 :

{  "欢迎登录": "欢迎登录",  "参数配置":"参数配置",  "折价币种":"折价币种"}

调用方法 :
<h1 class="slogan">{{ $t('欢迎登录') }}</h1>

# src\utils\config.js

import Cookies from 'js-cookie'import i18n from '@/locales/index.js'const Key = 'hb_lang'export function get() {  return Cookies.get(Key)}export function set(data) {  i18n.locale = data  return Cookies.set(Key, data)}export function remove() {  return Cookies.remove(Key)}

其中 , 当需要动态切换语言时，调用 set 方法即可， 例如:

import { set as setLanguage } from '@/utils/config.js'setLanguage('en_US')