Vue.js中如何调用JSON翻译文件的键值文本？

嘿，看了你的代码，问题主要出在两个地方：一是data的位置放错了，二是你把messages当成方法来调用，但它其实是个JSON对象。咱们一步步来修正：

1. 先修正组件的结构 #

首先，data应该是组件的顶级选项，不能嵌套在methods里面。正确的引入和挂载方式是这样的：

import messages from './i18n/messages.json'

export default {
  // data是组件的顶级属性，不是methods的子属性
  data() {
    return {
      messages: messages
    }
  },
  methods: {
    loginUser() {
      if (/* 这里是你的login判断逻辑 */) {
        // 现在可以正确访问翻译内容了
        const successText = this.messages.LOGIN_SUCCESS
        console.log(successText)
      }
    }
  }
}

2. 访问翻译内容的两种方式 #

因为messages.json是一个键值对对象（假设你的结构是{"LOGIN_SUCCESS": "登录成功", "TOKEN": "令牌"}这种），你有两种方式获取对应值：

• 点语法：this.messages.LOGIN_SUCCESS（适合键名是合法标识符的情况）
• 方括号语法：this.messages['LOGIN_SUCCESS']（适合键名有特殊字符或者是动态变量的情况）

3. 封装一个便捷的翻译方法（可选） #

如果你习惯像this.$t('LOGIN_SUCCESS')这种调用方式，可以自己封装一个方法，用起来更顺手：

import messages from './i18n/messages.json'

export default {
  data() {
    return {
      messages: messages
    }
  },
  methods: {
    $t(key) {
      // 如果找不到对应键，返回key本身或者自定义默认提示
      return this.messages[key] || `[未找到翻译: ${key}]`
    },
    loginUser() {
      if (/* login判断 */) {
        // 现在就可以像你之前想的那样调用了
        const successText = this.$t('LOGIN_SUCCESS')
        console.log(successText)
      }
    }
  }
}

补充：messages.json的示例结构 #

确保你的messages.json是标准的键值对格式，比如：

{
  "LOGIN_SUCCESS": "登录成功",
  "TOKEN": "令牌",
  "LOGIN_FAILED": "登录失败，请检查账号密码"
}

这样调整后，你就能顺利获取到messages.json里的翻译内容啦！

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