Question

我正在使用vue，vuei18n和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，故事书5.2.1。

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

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

这是因为$ i18n.locale设置为“ en-US”，即使我在加载时已在故事中对其进行了定义。如果我插入将locale设置为“ en”的created（）方法，则翻译工作正常。为什么会这样？

Answer 1

错误消息msg是“无法转换键路径translation.value的值”。因此，也许您需要在i18n实例中声明translation.value。像：

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

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

1 个答案: