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

Posted 2023-02-23

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

【英文标题】：Add yaml-loader in i18n tags in a Vue-CLI 3 project

【发布时间】：2019-01-18 01:08:57

【问题描述】：

使用 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 是如何工作的，我缺少什么？

【问题讨论】：

看看这个：github.com/kazupon/vue-cli-plugin-i18n/issues/14

【参考方案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();
  

我也不是这种语法的忠实粉丝，但你应该让它工作;）

【参考方案2】：

您似乎使用的是 YAML 语法的 JSON 语法，这就是您收到此错误的原因。 例如JSON 语法：

  "en": 
          "hello": "Hello !"
  

YAML 语法：

en:
 hello: Hello!