Vue.js：如何从外部JS调用main.js的mounted及验证代码调用异常

这个问题几乎肯定是**this的指向问题**，或者是你在commonValidation.js里没拿到正确的Vue实例导致的。

为什么直接写在mounted里生效？ #

在Vue实例的mounted钩子内部，this指向的是当前的Vue实例，所以this.$validator能正确找到你注册的验证器实例，自然能生效。

为什么放在commonValidation.js里调用不生效？ #

你在commonValidation.js里直接写this.$validator时，这里的this根本不是Vue实例——模块文件里的this默认指向模块的全局对象（浏览器里是window，Node环境是module.exports），所以找不到$validator，代码相当于白执行了。

解决方法 #

方法1：把本地化逻辑改成接受Vue实例参数的函数（最推荐）

// commonValidation.js
export const setupValidatorLocalization = (vueInstance) => {
  vueInstance.$validator.localize('en', {
    messages: {
      required: (field) => '* ' + field + ' is required'
    },
    attributes: {
      email: 'Email'
    }
  })
}

然后在main.js的mounted里，把当前实例传进去：

// main.js
import { setupValidatorLocalization } from './commonValidation.js'

new Vue({
  mounted() {
    // 把当前Vue实例作为参数传入
    setupValidatorLocalization(this)
  },
  // 其他配置
}).$mount('#app')

方法2：提前在main.js里暴露全局Vue实例（适合单实例应用）

如果你的项目是单Vue实例应用，可以把实例挂到全局：

// main.js
const appInstance = new Vue({
  mounted() {
    // ...
  },
  // 其他配置
}).$mount('#app')

// 挂到window上，让其他模块能访问到
window.appInstance = appInstance

然后在commonValidation.js里直接用全局实例：

// commonValidation.js
export const setupValidatorLocalization = () => {
  window.appInstance.$validator.localize('en', {
    messages: {
      required: (field) => '* ' + field + ' is required'
    },
    attributes: {
      email: 'Email'
    }
  })
}

之后在main.js的mounted里调用这个函数就行。

方法3：注册验证器时直接配置本地化（更优雅）

如果你用的是vee-validate（从代码看大概率是），其实可以在注册插件的时候直接配置本地化，不用等到mounted：

// main.js
import Vue from 'vue'
import VeeValidate from 'vee-validate'
import { localize } from 'vee-validate'

// 把本地化配置单独抽出来，也可以放在commonValidation.js里导入
const enValidationConfig = {
  messages: {
    required: (field) => '* ' + field + ' is required'
  },
  attributes: {
    email: 'Email'
  }
}

// 先配置本地化
localize('en', enValidationConfig)
// 再注册插件
Vue.use(VeeValidate)

new Vue({
  // 这里就不用在mounted里处理了
}).$mount('#app')

这样代码更简洁，还能避免生命周期的问题。

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