如何从导入模块调用全局i18n？Vue组件设置locale后常量文件失效

这个问题我之前开发Vue多语言项目时也踩过坑！本质原因是模块加载时机不匹配：你的constants.js在应用初始化阶段就被导入并执行了，里面所有的i18n.t()调用都是在模块解析完成时就生成了静态字符串——这时候你在组件created钩子中设置的locale还完全没生效呢！

简单说：当你importconstants.js的那一刻，CUSTOMIZE对象就已经被创建好了，所有text字段都是默认语言的翻译结果，后续哪怕你切换了locale，这些静态字符串也不会自动更新。

推荐解决方案 #

下面给你两种实用的解决思路，根据你的项目场景选就行：

方案1：把常量改成动态生成的函数 #

把constants.js里的静态对象改成一个返回对象的函数，这样每次调用函数时，都会用当前最新的locale重新执行翻译：

// constants.js
import i18n from "../i18n";

export default function getCustomizeConstants() {
  return {
    product_frame : {
      single: [
        { value: '360x200', text : i18n.t('["CUSTOMIZE.FRAME.DIMENSION.OPTION"]["PX.BY"][0]', {'0': '360', '1': '200'}) },
        { value: '450x250', text : i18n.t('["CUSTOMIZE.FRAME.DIMENSION.OPTION"]["PX.BY"][0]', {'0': '450', '1': '250'}) },
        { value: '540x300', text : i18n.t('["CUSTOMIZE.FRAME.DIMENSION.OPTION"]["PX.BY"][0]', {'0': '540', '1': '300'}) },
        { value: '630x350', text : i18n.t('["CUSTOMIZE.FRAME.DIMENSION.OPTION"]["PX.BY"][0]', {'0': '630', '1': '350'}) },
        { value: '720x400', text : i18n.t('["CUSTOMIZE.FRAME.DIMENSION.OPTION"]["PX.BY"][0]', {'0': '720', '1': '400'}) }
      ],
      multiple: [
        { value: '150x225', text : i18n.t('["CUSTOMIZE.FRAME.DIMENSION.OPTION"]["PX.BY"][0]', {'0': '150', '1': '225'}) },
        { value: '180x270', text : i18n.t('["CUSTOMIZE.FRAME.DIMENSION.OPTION"]["PX.BY"][0]', {'0': '180', '1': '270'}) },
        { value: '200x300', text : i18n.t('["CUSTOMIZE.FRAME.DIMENSION.OPTION"]["PX.BY"][0]', {'0': '200', '1': '300'}) },
        { value: '220x330', text : i18n.t('["CUSTOMIZE.FRAME.DIMENSION.OPTION"]["PX.BY"][0]', {'0': '220', '1': '330'}) },
        { value: '250x375', text : i18n.t('["CUSTOMIZE.FRAME.DIMENSION.OPTION"]["PX.BY"][0]', {'0': '250', '1': '375'}) }
      ]
    },
  };
}

然后在组件中，设置完locale之后再调用这个函数，或者用计算属性实时获取最新值：

// 你的Vue组件
import getCustomizeConstants from './constants.js'

export default {
  computed: {
    customizeConstants() {
      // 计算属性会在locale变化时自动重新执行，拿到最新翻译
      return getCustomizeConstants();
    }
  },
  created() {
    this.$i18n.locale = 'zh-CN'; // 假设切换到中文
  }
}

方案2：分离常量与翻译逻辑 #

把constants.js里的翻译逻辑抽出来，只保留纯数据（比如尺寸值和参数），然后在组件中用当前的$t方法动态生成翻译文本：

// constants.js
export default {
  product_frame : {
    single: [
      { value: '360x200', args: ['360', '200'] },
      { value: '450x250', args: ['450', '250'] },
      { value: '540x300', args: ['540', '300'] },
      { value: '630x350', args: ['630', '350'] },
      { value: '720x400', args: ['720', '400'] }
    ],
    multiple: [
      { value: '150x225', args: ['150', '225'] },
      { value: '180x270', args: ['180', '270'] },
      { value: '200x300', args: ['200', '300'] },
      { value: '220x330', args: ['220', '330'] },
      { value: '250x375', args: ['250', '375'] }
    ]
  },
};

然后在组件中通过计算属性动态生成带翻译的选项：

// 你的Vue组件
import CUSTOMIZE from './constants.js'

export default {
  computed: {
    localizedCustomize() {
      const translate = this.$t;
      return {
        product_frame: {
          single: CUSTOMIZE.product_frame.single.map(item => ({
            ...item,
            text: translate('["CUSTOMIZE.FRAME.DIMENSION.OPTION"]["PX.BY"][0]', {'0': item.args[0], '1': item.args[1]})
          })),
          multiple: CUSTOMIZE.product_frame.multiple.map(item => ({
            ...item,
            text: translate('["CUSTOMIZE.FRAME.DIMENSION.OPTION"]["PX.BY"][0]', {'0': item.args[0], '1': item.args[1]})
          }))
        }
      }
    }
  },
  created() {
    this.$i18n.locale = 'zh-CN';
  }
}

核心思路总结 #

不管用哪种方案，核心都是避免在模块加载阶段提前执行翻译，把翻译逻辑延迟到组件已经完成locale设置之后再执行——这样才能确保翻译时使用的是最新的语言环境。

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