Reputation: 380
Using Vue-i18n and following this tutorial, I managed to add tags in json in my project gererated by vue-cli.
In this page, there is an example to write yaml instead of json. But there is no example with the Vue-Cli 3 Webpack managment.
So I tried this :
// 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();
}
}
But I've got this error
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
I don't fully understand how webpack-chain is working, what do I missing ?
Upvotes: 3
Views: 2605
Reputation: 9
It seems like you're using JSON syntax instead of YAML syntax and that's the reason you get this error. e.g. JSON syntax:
"en": {
"hello": "Hello !"
}
YAML syntax:
en:
hello: Hello!
Upvotes: 0
Reputation: 375
The correct webpack-chain api usage for adding a yaml preloader would be
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();
}
}
I'm also not a big fan of this syntax, but like that you should get it working ;)
Upvotes: 1