Vue i18n 国际化
Vue About 3,220 words安装
vue add i18n
默认生成
生成en.json
:位于src/locales
下
{
"message": "hello i18n !!"
}
生成i18n.js
:位于src
下
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
function loadLocaleMessages () {
const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
const messages = {}
locales.keys().forEach(key => {
const matched = key.match(/([A-Za-z0-9-_]+)\./i)
if (matched && matched.length > 1) {
const locale = matched[1]
messages[locale] = locales(key)
}
})
return messages
}
export default new VueI18n({
locale: process.env.VUE_APP_I18N_LOCALE || 'en',
fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
messages: loadLocaleMessages()
})
修改main.js
:增加i18n
。
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import i18n from './i18n'
Vue.config.productionTip = false
new Vue({
router,
store,
i18n,
render: h => h(App)
}).$mount('#app')
修改.env
:增加LOCALE
和FALLBACK_LOCALE
配置。
VUE_APP_I18N_LOCALE=en
VUE_APP_I18N_FALLBACK_LOCALE=en
package.json
改动:scripts
增加i18n:report
。
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"i18n:report": "vue-cli-service i18n:report --src \"./src/**/*.?(js|vue)\" --locales \"./src/locales/**/*.json\""
}
package.json
改动:dependencies
增加vue-i18n
。
"dependencies": {
"vue-i18n": "^8.26.3"
}
package.json
改动:devDependencies
增加@intlify/vue-i18n-loader
、vue-cli-plugin-i18n
。
"devDependencies": {
"@intlify/vue-i18n-loader": "^1.1.0",
"vue-cli-plugin-i18n": "~2.3.1"
}
修改vue.config.js
:增加pluginOptions
。
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
pluginOptions: {
i18n: {
locale: 'en',
fallbackLocale: 'en',
localeDir: 'locales',
enableInSFC: true,
enableBridge: false
}
}
})
使用
$t
{
"message": "hello i18n !!"
}
使用$t('message')
<p>{{ $t('message') }}</p>
变量替换
{
"info": "I am {locale}"
}
使用$t('字段', {变量: 变量的值})
,替换:
<p>{{ $t('info', {locale: '实际的值'}) }}</p>
切换语言
$i18n.locale='cn'
$i18n.locale='en'
示例
<template>
<div>
<p>{{ $t('message') }}</p>
<div>
<button @click="$i18n.locale='cn'">cn</button>
</div>
<div>
<button @click="$i18n.locale='en'">en</button>
</div>
</div>
</template>
data
中使用this.$t()
不会动态切换语言。
v-text="$t()"
可以动态切换语言。
<template>
<div>
<p>{{ username }} - {{$t("person.username")}}</p>
<p>{{ address }} - {{$t("person.address")}}</p>
<p v-text="username"></p>
<p v-text="$t('person.username')"></p>
<div>
<button @click="$i18n.locale='cn'">cn</button>
</div>
<div>
<button @click="$i18n.locale='en'">en</button>
</div>
</div>
</template>
<script>
export default {
name: 'HelloI18n',
data() {
return {
username: this.$t("person.username"),
address: this.$t("person.address")
}
}
}
</script>
参考
Views: 1,082 · Posted: 2023-01-08
————        END        ————
Give me a Star, Thanks:)
https://github.com/fendoudebb/LiteNote扫描下方二维码关注公众号和小程序↓↓↓
Loading...