vue.js - vue-i18n + 故事书 - 为什么我的翻译不起作用？

Question

我正在使用 vue、vuei18n 和 Storybook，但我在翻译显示方面遇到问题。

storybook 使用我的自定义 webpack 配置加载得很好。翻译通过 .json 文件存储在每个组件的 i18n 标记中。

我正在使用以下 webpack 配置规则:

        test: /\.scss$/,
        loaders: ["style-loader", "css-loader", "sass-loader"],
        include: path.resolve(__dirname, "../"),
    }, {
        test: /\.html$/,
        loaders: ["html-loader"],
        include: path.resolve(__dirname, "../"),
    }, {
        resourceQuery: /blockType=i18n/,
        type: "javascript/auto",
        loader: "@kazupon/vue-i18n-loader",
    });

故事通常是这样加载的:

storiesOf("MyComponent", module)
    .add("MyComponent opened", () => ({
        components: { MyComponent },
        template: '<v-app><my-component></my-component></v-app>',
        i18n,
        store,
        created() {
            store.dispatch("myComponent/openWith", null);
        },
    }))

我还在使用 vue-loader 15.7.1、storybook 5.2.1。

当组件加载时，我在浏览器控制台上收到以下警告:

[vue-i18n] Cannot translate the value of keypath 'translation.value'. Use the value of keypath as default

这是因为 $i18n.locale 设置为“en-US”，尽管我已在故事加载时对其进行了定义。如果我插入一个将语言环境设置为“en”的created()方法，则翻译工作正常。为什么会发生这种情况？

Answer 1

错误消息是“无法翻译 keypath translation.value 的值”。因此，您可能需要在 i18n 实例中声明 translation.value。喜欢:

i18n: new VueI18n({
  locale: 'en',
  messages: {
    en: {
      transition: {
        value: 'value'
      }
  }
}