使用 Vue 3 + Vuetify 3 的 i18n 自定义块的语言环境消息
Locale messages with using i18n custom block for Vue 3 + Vuetify 3
我想为每个组件单独设置语言环境消息。我找到了 example 如何为 Vue 2 做到这一点,但我找不到如何为 Vue 3 和 Vuetify 3 做到这一点。这就是我所做的:
package.json
"dependencies": {
"@mdi/font": "6.5.95",
"core-js": "^3.8.3",
"roboto-fontface": "*",
"vue": "^3.2.13",
"vue-class-component": "^8.0.0-0",
"vue-i18n": "^9.1.2",
"vue-router": "^4.0.3",
"vuetify": "npm:@vuetify/nightly@next",
"vuex": "^4.0.0",
"webfontloader": "^1.0.0"
},
"devDependencies": {
"@kazupon/vue-i18n-loader": "^0.3.0", <--- This one is used for Vue 2.
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@types/webfontloader": "^1.6.34",
"@typescript-eslint/eslint-plugin": "^5.4.0",
"@typescript-eslint/parser": "^5.4.0",
"@vue/cli-plugin-babel": "~5.0.0-rc.1",
"@vue/cli-plugin-eslint": "~5.0.0-rc.1",
"@vue/cli-plugin-router": "~5.0.0-rc.1",
"@vue/cli-plugin-typescript": "~5.0.0-rc.1",
"@vue/cli-plugin-vuex": "~5.0.0-rc.1",
"@vue/cli-service": "~5.0.0-rc.1",
"@vue/eslint-config-typescript": "^9.1.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"less": "^4.1.1",
"less-loader": "7.3.0",
"sass": "^1.38.0",
"sass-loader": "^10.0.0",
"typescript": "~4.1.5",
"vue-cli-plugin-vue-i18n": "~1.0.1",
"vue-cli-plugin-vuetify": "~2.4.5",
"vuetify-loader": "^2.0.0-alpha.0"
},
我的component.vue:
<template>
<v-card-actions>
<v-tooltip left>
<template v-slot:activator="{ props }">
<v-btn v-bind="props">
<v-icon size="25">mdi-home</v-icon>
</v-btn>
</template>
<span>{{ $t('hello') }}</span>
</v-tooltip>
</v-card-actions>
</template>
<i18n>
{
"en": {
"hello": "Hello, world!"
},
"ru": {
"hello": "Привет, мир"
}
}
</i18n>
和main.ts:
const app = createApp(App)
installI18n(app)
const i18n = createI18n({
locale: 'en',
messages: {
}
})
app
.use(i18n)
.use(vuetify)
.mount('#app')
但是,当我 运行 我的组件时,我在工具提示中看不到 Hello, world!
。任何人都可以帮助实现它吗?
编辑: 我尝试使用 @intlify/vue-i18n-loader
而不是 @kazupon/vue-i18n-loader
但它没有帮助。此测试项目可在 github
您需要按照官方文档中的说明安装vue-i18n-loader
:
You need to install vue-loader and vue-i18n-loader to use custom blocks. While vue-loader (opens new window)most likely is already used in your project if you are working with single file components, you must install vue-i18n-loader (opens new window)additionally:
npm i --save-dev @intlify/vue-i18n-loader
除了根据@BoussadjraBrahim 的其他回答安装 @intlify/vue-i18n-loader
(而不是 @kazupon/vue-i18n-loader
)之外,加载程序必须是 configured in your Vue CLI project. That config is missing from your vue.config.js
,因此 <i18n>
块是忽略。
添加以下配置以启用 SFC 中 <i18n>
块的处理:
// vue.config.js
module.exports = {
chainWebpack: (config) => {
config.module
.rule('i18n')
.resourceQuery(/blockType=i18n/)
.type('javascript/auto')
.use('i18n')
.loader('@intlify/vue-i18n-loader')
.end()
},
⋮
}
我想为每个组件单独设置语言环境消息。我找到了 example 如何为 Vue 2 做到这一点,但我找不到如何为 Vue 3 和 Vuetify 3 做到这一点。这就是我所做的:
package.json
"dependencies": {
"@mdi/font": "6.5.95",
"core-js": "^3.8.3",
"roboto-fontface": "*",
"vue": "^3.2.13",
"vue-class-component": "^8.0.0-0",
"vue-i18n": "^9.1.2",
"vue-router": "^4.0.3",
"vuetify": "npm:@vuetify/nightly@next",
"vuex": "^4.0.0",
"webfontloader": "^1.0.0"
},
"devDependencies": {
"@kazupon/vue-i18n-loader": "^0.3.0", <--- This one is used for Vue 2.
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@types/webfontloader": "^1.6.34",
"@typescript-eslint/eslint-plugin": "^5.4.0",
"@typescript-eslint/parser": "^5.4.0",
"@vue/cli-plugin-babel": "~5.0.0-rc.1",
"@vue/cli-plugin-eslint": "~5.0.0-rc.1",
"@vue/cli-plugin-router": "~5.0.0-rc.1",
"@vue/cli-plugin-typescript": "~5.0.0-rc.1",
"@vue/cli-plugin-vuex": "~5.0.0-rc.1",
"@vue/cli-service": "~5.0.0-rc.1",
"@vue/eslint-config-typescript": "^9.1.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"less": "^4.1.1",
"less-loader": "7.3.0",
"sass": "^1.38.0",
"sass-loader": "^10.0.0",
"typescript": "~4.1.5",
"vue-cli-plugin-vue-i18n": "~1.0.1",
"vue-cli-plugin-vuetify": "~2.4.5",
"vuetify-loader": "^2.0.0-alpha.0"
},
我的component.vue:
<template>
<v-card-actions>
<v-tooltip left>
<template v-slot:activator="{ props }">
<v-btn v-bind="props">
<v-icon size="25">mdi-home</v-icon>
</v-btn>
</template>
<span>{{ $t('hello') }}</span>
</v-tooltip>
</v-card-actions>
</template>
<i18n>
{
"en": {
"hello": "Hello, world!"
},
"ru": {
"hello": "Привет, мир"
}
}
</i18n>
和main.ts:
const app = createApp(App)
installI18n(app)
const i18n = createI18n({
locale: 'en',
messages: {
}
})
app
.use(i18n)
.use(vuetify)
.mount('#app')
但是,当我 运行 我的组件时,我在工具提示中看不到 Hello, world!
。任何人都可以帮助实现它吗?
编辑: 我尝试使用 @intlify/vue-i18n-loader
而不是 @kazupon/vue-i18n-loader
但它没有帮助。此测试项目可在 github
您需要按照官方文档中的说明安装vue-i18n-loader
:
You need to install vue-loader and vue-i18n-loader to use custom blocks. While vue-loader (opens new window)most likely is already used in your project if you are working with single file components, you must install vue-i18n-loader (opens new window)additionally:
npm i --save-dev @intlify/vue-i18n-loader
除了根据@BoussadjraBrahim 的其他回答安装 @intlify/vue-i18n-loader
(而不是 @kazupon/vue-i18n-loader
)之外,加载程序必须是 configured in your Vue CLI project. That config is missing from your vue.config.js
,因此 <i18n>
块是忽略。
添加以下配置以启用 SFC 中 <i18n>
块的处理:
// vue.config.js
module.exports = {
chainWebpack: (config) => {
config.module
.rule('i18n')
.resourceQuery(/blockType=i18n/)
.type('javascript/auto')
.use('i18n')
.loader('@intlify/vue-i18n-loader')
.end()
},
⋮
}