falkartis
commented
7 years ago Hi @Kouty , I'm pretty stuck trying to make this i18n to work. I don't know if it's because I'm dumb, or because it's poorly documented, or because the documentation doesn't quite match to the reality?
I tried out the points you've posted, but I'm not sure about some of them. So I went directly to the remove, clean and install part.
But without success... Am I missing something?
How should the vue-i18n-loader be configured?
This is what I have
webpack.config.js
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// copiat de http://kazupon.github.io/vue-i18n/en/sfc.html
// you need to specify `i18n` loaders key with `vue-i18n-loader` (https://github.com/kazupon/vue-i18n-loader)
i18n: '@kazupon/vue-i18n-loader'
//i18n: 'vue-i18n-loader'
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}this produces following error:
ERROR in ./src/App.vue
Module not found: Error: Can't resolve '@kazupon/vue-i18n-loader' in '/my/project/path/src'
@ ./src/App.vue 21:18-131
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.jsmain.js
import Vue from 'vue';
import VueI18n from 'vue-i18n'
import VueRouter from 'vue-router';
import SocialSharing from 'vue-social-sharing';
import App from './App.vue';
//import Home from './Home.vue';
Vue.use(VueI18n)
//Vue.use(Vue-i18n)
Vue.use(VueRouter);
Vue.use(SocialSharing);
const i18n = new VueI18n({
locale: 'es',
messages: {
es: {
}
}
})
const routes = [
{ path: '/', component: view('Home') },
//{ path: '/', component: Home },
// MORE PATHS HERE
]
const router = new VueRouter({
history: true,
routes,
scrollBehavior (to, from, savedPosition) {
if (to.hash) {
return {
selector: to.hash
}
}
}
});
/**
* Asynchronously load view (Webpack Lazy loading compatible)
* @param {string} name the filename (basename) of the view to load.
*/
function view(name) {
return function(resolve) {
require(['./' + name + '.vue'], resolve);
}
};
export default router;
new Vue({
i18n,
router,
el: '#app',
render: h => h(App)
});App.vue
<template>
<div id="app">
<app-header></app-header>
<router-view></router-view>
<app-footer></app-footer>
<label for="locale">locale</label>
<select v-model="locale">
<option>ca</option>
<option>es</option>
</select>
<p>message: {{ $t('hola') }}</p>
</div>
</template>
<i18n>
{
"es": { "hola": "Hola mundo!" ], //is this enough syntax error?
"ca": { "hola": "Hola mon!" }
}
</i18n>
<script>
import Header from './Header.vue';
import Footer from './Footer.vue';
export default {
name: 'app',
components: {
'app-header': Header,
'app-footer': Footer,
},
data () {
return {
locale: 'es'
}
},
watch: {
locale (val) {
this.$i18n.locale = val
}
}
}
</script>
<style>
/*SOME CSS HERE*/
</style>
<style scoped>
/*SOME CSS HERE*/
</style>
Kouty
amaranthius
TugayYaldiz
maronk
kazupon
This is not exactly an issue of vue-i18n-loader, I am writing it as a reminder for others that may face this problem: if, inside a single file component, you get the error "Cannot translate the value of keypath...", it may be cause by npm cache.
Solution:
<i18n>{...}</i18n>tagAfter that, it worked for me (and my colleagues facing the same problem).