vue-i18n-transform-with-map

介绍

vue-i18n-transform 是一个 vue-i18n 批量转换文件的工具包，目前仅支持替换中文

本项目 fork vue-i18n-transform (https://github.com/zxpsuper/vue-i18n-transform.git),

• 新增加了一个keyMap.json,用于指定替换文件的key;
• 新增 BREAK 关键字, 用来跳过当前key,不替换;

没有keymap.json时,与vue-i18n-transform生成key规则一致;

keyMap.json格式如下('BREAK'为保留关键字,用来跳过当前key,不替换;)

  {
    "dash_board_index_12": "list",
    "dash_board_index_13": "aaa",
    "dash_board_index_15": "bbb",
    "dash_board_edit_1": "add",
    "dash_board_edit_2": "BREAK",
    "dash_board_edit_3": "save"
  }

vue 文件替换

<!-- 替换前 -->
<i :class="{ selected: tabactiveName === 1 }" @click="handleTabClick(1)">
  <span>效果图</span>
</i>

<!-- 替换后 -->
<i :class="{ selected: tabactiveName === 1 }" @click="handleTabClick(1)">
  <span>{{$t('filename_1')}}</span>
</i>

js / ts 文件替换

// 替换前
export const map = {
  key: '替换前'
}

// 替换后

import i18n from '../locales/index.js'

export const map = {
  key: i18n.t('filename_2')
}

生成 locales/zh_cn.json 文件

{
  "filename_1": "效果图",
  "filename_2": "替换前"
}

生成 locales/index.js 文件

import VueI18n from 'vue-i18n'
import Vue from 'vue'
import zh from './zh_cn.json'

Vue.use(VueI18n)

export default new VueI18n({
  locale: 'zh',
  messages: {
    zh
  }
})

需手动将 VueI18n 导入入口文件中使用

import i18n from './locales/index.js'

new Vue({
  i18n,
  router,
  store
})

安装

npm i vue-i18n-transform-with-map

转化

npx vue-i18n-transform-with-map

配置

以下是默认配置, 当然你也可以在项目文件夹下创建 vue-i18n-transform.config.js 文件, 按下面的配置修改你的自定义配置

module.exports = {
  entry: 'src', // 编译入口文件夹,默认是 src
  outdir: 'src/locales', // i18n 输出文件夹 默认是 src/locales
  exclude: ['src/locales'], // 不重写的文件夹, 默认是 ['src/locales']
  extensions: ['.vue', '.js', '.ts'], // 重写的文件类型，默认是 ['.js', '.vue', '.ts']
  single: false, // 是否为单文件编译, 默认为 false. 如果为 true, 则 entry 需为文件而不是文件夹, 如 entry: 'src/index.vue'
  filename: 'zh_cn' // 输入的中文 json 文件名,默认为 zh_cn
}

问题&建议