Vue.js使用Vee-Validation本地化消息：main.js调用报错问题

这个错误的原因很明确——在main.js里你直接尝试访问this.$validator，但此时Vue组件实例还没创建，this根本指向不到组件实例，自然会拿到undefined，更别说调用localize方法了。

针对你使用的Vee-Validate 2.x（从this.$validator的用法判断），有两种正确的全局本地化配置方式，都能把配置放在main.js里：

方法一：插件安装时直接传入本地化配置 #

这是最简洁的方式，在安装Vee-Validate插件时，直接把本地化规则作为配置项传入：

import Vue from 'vue'
import VeeValidate from 'vee-validate'

// 定义英文本地化规则
const enLocale = {
  messages: {
    required: (field) => `* ${field} is required` // 注意补全字符串拼接的引号
  },
  attributes: {
    email: 'Email'
  }
}

// 安装插件并配置全局本地化
Vue.use(VeeValidate, {
  locale: 'en', // 设置默认语言为英文
  dictionary: {
    en: enLocale
  }
})

方法二：通过Validator对象全局设置 #

如果需要后续动态切换语言等更灵活的操作，可以导入Validator对象来完成本地化注册：

import Vue from 'vue'
import VeeValidate from 'vee-validate'
import { Validator } from 'vee-validate'

// 定义本地化信息
const enLocale = {
  messages: {
    required: (field) => `* ${field} is required`
  },
  attributes: {
    email: 'Email'
  }
}

// 全局注册英文本地化规则
Validator.localize('en', enLocale)
// 可选：设置默认使用的语言
Validator.setLocale('en')

// 最后安装插件
Vue.use(VeeValidate)

这两种方式都能让你把本地化配置统一放在main.js中，不需要在每个组件的created生命周期里重复编写代码。另外注意你原代码里的required字符串缺少引号，记得补上避免语法错误。

内容的提问来源于stack exchange，提问作者Ashwini