在Vue-cli中，大多数我们需要的loader都已经集成了，但是确并不适用于所有场景。
i18n 还是需要一套专属的loader 的。
npm i --save-dev @kazupon/vue-i18n-loader
下载完成以后还需要配置，vue-cli 的webpack 配置看起来眼花缭乱，我现在把方法记录起来。
想要在.VUE 文件中使用<i18n></i18n> 的自定义标签，在 webpack.base.conf.js 中更改配置
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
}
//这是改动前 options 的 value 被cli 集合成一个对象了，
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
vueLoaderConfig,
loaders: {
i18n: '@kazupon/vue-i18n-loader'
}
}
}
//改动后
改好了以后,配置main.js
\\ main.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import App from './App.vue'
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: 'en', // 设置默认使用语言
messages: {
en: {
}
}
})
new Vue({
i18n, //挂载在根实例中
el: '#app',
render: h => h(App)
})
在组件中 : app.vue
<template>
<div id="app">
<label for="locale">locale</label>
<select v-model="locale">
<option>en</option>
<option>ja</option>
</select>
<p>message: {{ $t('hello') }}</p>
</div>
</template>
<i18n> //i18n 标签储存供当前文件使用的翻译信息
{
"en": {
"hello": "hello world!"
},
"ja": {
"hello": "こんにちは、世界！"
}
}
</i18n>
<script>
export default {
name: 'app',
data () { return { locale: 'en' } },
watch: {
locale (val) {
// 使用V-model 双向绑定 locale
//watch locale 的更改 调用根实例的i18n 注意点，要加$符号
this.$i18n.locale = val
}
}
}
</script>
