zoukankan      html  css  js  c++  java
  • 使用vuex+vue-i18n方式国际化

    在static/lang下新建文件:

    index.js、en.js、zh.js...

    // en.js
    module.exports = {
      route: {
        title: 'chengdu',
      }    
    }
    
    // zh.js
    module.exports = {
      route: {
        title: '成都',
      }    
    }
    
    // index.js
    import path from 'path'
    import fs from 'fs'
    
    let files = fs.readdirSync(path.join('./', 'static', 'lang'))
    
    let langPack = {}
    
    for (let file of files) {
      if (file !== 'index.js') {
        langPack[file.replace(/.js/, '')] = require(`./${file}`)
      }
    }
    
    export deafult langPack

    然后在src/store/plugins下的i18n.js中使用插件方式引入vue-i18n

    import * as types from '../types'
    import VueI18n from 'vue-i18n'
    import langPack from '@/../static/lang'
    
    import Vue from 'vue'
    Vue.use(VueI18n)
    
    export const i18n = new VueI18n({
      locale: 'zh',
      messages: langPack,
    })
    
    function i18nPlugin (store) {
      store.subscribe((mutation, state) => {
        if (mutation.type === types.SET_LANGUAGE) {
          i18n.locale = mutation.payload.toString()
        }
      })
    }
    
    export default i18nPlugin

    记得要在store/index.js中引入插件以及使用mutation的方式改变state。

  • 相关阅读:
    网络数据处理
    进程间通信和网络
    附加的操作系统服务
    通用操作系统服务
    UIScrollView 子控件的自动布局经验
    UIImage 添加水印
    数据类型
    ios 获取手机的IP地址
    UILAbel 设置了attributedText 后省略号不显示
    swift
  • 原文地址:https://www.cnblogs.com/mesopotamiazZ/p/8025814.html
Copyright © 2011-2022 走看看