Question

使用Vue-i18n和this tutorial之后，我设法在由vue-cli萌发的项目中的json中添加标签。

在此页面中，有一个示例来编写yaml而不是json。但是，没有Vue-Cli 3 Webpack管理的例子。

所以我尝试了这个：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('i18n')
      .resourceQuery(/blockType=i18n/)
      .use('i18n')
        .loader('@kazupon/vue-i18n-loader')
        .loader('yaml-loader')
        .end();
  }
}

但是我遇到了这个错误

error  in ./src/components/HelloWorld.vue?vue&type=custom&index=0&blockType=i18n

Module parse failed: Unexpected token (2:5)
You may need an appropriate loader to handle this file type.
| {
>       "en": {
|               "hello": "Hello !"
|       }

 @ ./src/components/HelloWorld.vue?vue&type=custom&index=0&blockType=i18n 1:0-233 1:249-252 1:254-484 1:254-484
 @ ./src/components/HelloWorld.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--13-2!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Home.vue?vue&type=script&lang=ts&
 @ ./src/views/Home.vue?vue&type=script&lang=ts&
 @ ./src/views/Home.vue
 @ ./src/router.ts
 @ ./src/main.ts

我不完全了解webpack-chain的工作方式，我想念什么？

Answer 1

添加yaml预加载器的正确webpack-chain api用法将是

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('i18n')
      .resourceQuery(/blockType=i18n/)
      .use('i18n')
        .loader('@kazupon/vue-i18n-loader')
        .end()
      .use('yaml-loader')
        .loader('yaml-loader')
        .end();
  }
}

我也不是这种语法的忠实拥护者，但是那样您应该使它正常工作;）

- “编辑必须至少包含6个字符；这篇文章是否还有其他需要改进的地方？”不，只能删除多余的分号

在Vue-CLI 3项目的i18n标签中添加yaml-loader

1 个答案: