Skip to content

使用文档

Jump to bottom
HHHHHArden edited this page Aug 2, 2021 · 1 revision

使用文档

安装

添加相关配置

vscode插件i18n Ally配置添加，建议在.vscode/settings.json ：

{
  "i18n-ally.localesPaths": "locale",
  "i18n-ally.displayLanguage": "zh",
  "i18n-ally.namespace": true,
  "i18n-ally.keystyle": "nested"
}

根目录创建 locale 文件夹：

├── locale 多语言文案文件夹
      ├── en 英语文案文件夹
      ├── zh 中文文案文件夹
├── ...
├── README.md 项目说明文档
├── vue.config.js vue配置文件
└── package.json

新增i18n.js：

├── locale 多语言文案文件夹
	├── en 		英语文案文件夹
	├── zh 		中文文案文件夹
├── ...
├── src		 vue主文件夹
	├── ...
	├── i18n.js		为vue-i18n导入翻译数据
├── README.md 项目说明文档
├── vue.config.js vue配置文件
└── package.json

内容（基于webpack api require）：

// i18n.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const localLang = localStorage.getItem('lang')

function loadLocaleMessages() {
  // locale路径如果有调整，在这里👇
  const locales = require.context('../locale', true, /[A-Za-z0-9-_,\s]+\.json$/i)
  const messages = {}
  locales.keys().forEach(key => {
    const file_matched = key.match(/([A-Za-z0-9-_]+)\./i)
    const lang_matched = key.match(/\.\/([A-Za-z0-9-_]+)\//i)

    if (file_matched && file_matched.length > 1 && lang_matched && lang_matched.length > 1) {
      const filename = file_matched[1]
      const lang = lang_matched[1]

      messages[lang] = messages[lang] ? { ...messages[lang], [filename]: locales(key) } : { [filename]: locales(key) }
    }
  })

  console.log(messages)
  return messages
}

const i18n = new VueI18n({
  locale: 'zh',
  fallbackLocale: localLang,
  messages: loadLocaleMessages()
})

window.i18n = new Vue({ i18n })

export default i18n

在 ./src/main.js 导入 i18n.js ：

import Vue from 'vue'
import App from './App'
import i18n from './i18n'
import router from './router'
import store from './store'

new Vue({
  i18n,
  render: h => h(App),
}).$mount('#app')
  • 导入位置放在其他需要i18n作用文件之前，这样保证这些文件可以正确使用 vue-i18n；

添加语言切换能力

在项目中，语言信息作为全局变量存储(Vuex or Storage皆可)。

vue-i18n提供了切换语言环境的api，但存在场景漏洞（e.g. 不支持vue#props#default文案切换）。在项目中推荐使用了Vue Router api重刷：this.$router.go(0)。

使用vue-i18n-extract

Usage: vue-i18n [options]

Options:
  -V, --version                            输出版本
  -h, --help                               提供帮助
  --extract [scanPath] [ignorePaths...]    提取指定文件夹下的中文，自动生成key，写入文案json文件，替换原文件
  --export [file] [lang]                   导出未翻译的文案
  --import [file] [lang]                   导入翻译文案
  --unused [isDelete]                      输出未使用的文案，支持自动删除
  --unscanned [scanPath] [ignorePaths...]  输出指定文件夹下，仍存在中文的文件

参数说明：

  • extract：scanPath 要扫描的文件夹或者文件路径；ignorePaths 忽略的扫描文件夹或者文件路径，支持多个；

  • export：file导出文件路径，格式为.tsv；lang：导出语言语种，默认是en；

  • import：同export；

  • unused：指定参数 "y", "Y", "yes", "Yes", "YES"时自动删除不再使用文案；

  • unscanned：同extract；

注意事项

约定

vue#script 部分必须是顶格写，去除冗余空格 ⇒ 交给 prettier 保证

  • 正确：

    <script>
export default {
  name:'App',
  data() {
    return {
      hello: '你好'
    }
  },
}
<script>

  • 错误：

    <script>
  export default {
    name:'App',
    	data() {
      return {
        	hello: '你好'
      	}
    	},
  }
</script>

覆盖场景的缺陷

  1. javascript属性名存在中文，处理后会导致语法错误：

    export const hello = {
  你好: '世界'
}

  2. jsx in vue/javascript 仅考虑最基本的两种字符串情况，未处理表达式：

    jsxData: (
  <el-form>
    <el-form-item label="人民币：">10元</el-form-item>
  </el-form>
)

  3. v-if、v-else-if 判断逻辑中如果包含中文，无法捕获，建议把逻辑放在 vue#script中：

    <p v-if="greeting === '你好'">
  你好
</p>

  4. vue props 的处理是有风险的，首先只能处理 default:'xxx' 的情况，default(){....} 的情况没有处理。其次避免代码中 object.key === 'default' 情况。（因为vue#script 最后是按照javascript在处理的，没法获取是不是props的信息，只能通过最基础的判断 key是default）

Clone this wiki locally