应用 Nuxt.js + nuxt-i18n + VeeValidate……

在 VeeValidate 中应用 nuxt-i18n#

嗯……这次要解决的问题是将 Nuxt 的 i18n 应用到 VeeValidate 中……
感觉比想象中要难很多……

https://qiita.com/keiichi-hikita/items/9d5742f1cc06fd0d5707
https://www.virment.com/how-to-use-veevalidate-nuxtjs/

首先，像 nuxt-i18n 这种情况，是由 Laravel 后端生成 js 文件后再放进去的……
实际上，Laravel 中也会用到一些 validation 内容。

一开始我想把这两者结合起来，但像 min 这样的规则，Laravel 支持的情况更多一些，所以要同时使用的话似乎需要做一些修改；说实话，我的水平还不足以同时使用这两者……

创建 plugins / vee-validate.js 文件后，

import { extend, configure } from "vee-validate";
import * as rules from 'vee-validate/dist/rules'

configure({

  defaultMessage: (field, values) => {
    // override the field name.
    values._field_ = $nuxt.$t(`fields.${field}`);
    values.attribute = $nuxt.$t(`fields.${field}`);

    return $nuxt.$t(`validation.${values._rule_}`, values);
  }
});

for (let rule in rules) {
  extend(rule, rules[rule])
}

我之前就是通过这种方式来使用的。
为了配合 Laravel 中使用的 attribute，我传入了对应的值，然后用 $nuxt.$ t 通过 nuxt-i18n 进行翻译……

一开始，extend 重复执行，导致有些内容因为被提前处理过而无法正确应用，浪费了不少时间，不过总之算是成功了……

不过，我正想着要不要就这样使用下去……后来又想换一种方式，于是也了解了一下其他方法。

https://logaretm.github.io/vee-validate/examples/i18n.html#localize-api

import en from 'vee-validate/dist/locale/en.json'
import ko from 'vee-validate/dist/locale/ko.json'
import ja from 'vee-validate/dist/locale/ja.json'

// Install English and Arabic localizations.
localize({
  en: {
    messages: en.messages,
    names: {
      email: "Email",
      password: "Password",
      nickname: "Nickname",
    }
  },
  ko: {
    messages: ko.messages,
    names: {
      email: "이메일",
      password: "비밀번호",
      nickname: "닉네임",
    }
  },
  ja: {
    messages: ja.messages,
    names: {
      email: "メール",
      password: "パスワード",
    }
  },
});

let LOCALE = "en";

// A simple get/set interface to manage our locale in components.
// This is not reactive, so don't create any computed properties/watchers off it.
Object.defineProperty(Vue.prototype, "locale", {
  get() {
    return LOCALE;
  },
  set(val) {
    LOCALE = val;
    localize(val);
  }
});

我本来想用这种方式来解决……但它有个缺点，就是无法在一个地方直接统一管理……
使用 nuxt-i18n 切换语言时，调用 localize 来切换 VeeValidate 的语言集也是可以的，不过……

嗯……考虑了很久之后，我决定采用前一种方式……

于是……我把之前保存的 en.json、ko.json、ja.json 转换成 Laravel lang 文件后保存了起来……

不过这里的提示是“项目的大小必须小于 :sizeKB”……这里本应只有 :size 才对……
结果出现了 :sizeKB 被处理成 {sizeKB} 的问题……
这个问题以后还得找出来解决……

老实说，我也不知道哪种才是正确的……

VeeValidate 3.0 发布也才没几天，
所以我也不确定自己目前采用的方式到底对不对……
不过，既然能正常运行……就先这样吧……

听说之后 Vue 3 也会推出……总之，先这么处理，继续往下走吧……
下次要是彻底重做之类的，再做得更细致一些……
现在是我水平不够，继续折腾下去恐怕要花太多时间，所以就先跳过了。

在 VeeValidate 中应用 nuxt-i18n#

更多文章