Javascript 在Vue CLI 3项目的i18n标记中添加yaml加载程序
使用Vue-i18n和以下工具,我成功地在我的项目中添加了json中的标记,该项目由Vue cli管理 在本页中,有一个编写yaml而不是json的示例。但Vue Cli 3网页包管理没有示例 所以我试了一下:Javascript 在Vue CLI 3项目的i18n标记中添加yaml加载程序,javascript,webpack,vue.js,vue-cli,vue-i18n,Javascript,Webpack,Vue.js,Vue Cli,Vue I18n,使用Vue-i18n和以下工具,我成功地在我的项目中添加了json中的标记,该项目由Vue cli管理 在本页中,有一个编写yaml而不是json的示例。但Vue Cli 3网页包管理没有示例 所以我试了一下: // vue.config.js module.exports = { chainWebpack: config => { config.module .rule('i18n') .resourceQuery(/blockType=i18n/)
// 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
我不完全理解网页包链是如何工作的,我缺少什么?添加yaml预加载程序的正确网页包链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();
}
}
我也不太喜欢这种语法,但你应该让它正常工作;) 看看这个: