当前位置: 代码迷 >> 综合 >> Nuxt国际化 Nuxt国际化 Vue i18n ssr vue i18n Vue ssr 国际化
  详细解决方案

Nuxt国际化 Nuxt国际化 Vue i18n ssr vue i18n Vue ssr 国际化

热度:17   发布时间:2023-12-17 20:04:23.0

在plugins/lang/index.js文件

import Vue from "vue";
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
export default (context) => {const i18n = new VueI18n({locale: 'en',messages: {'en': require('./en/index.json')}});context.app.i18n = i18n
}

配置
nuxt.config.js

module.exports = {plugins: ['~plugins/lang/index.js',]
}

在plugins/lang/en/index.json文件

{"Copy":"Copy了","SOLD":"SOLD售空了"}

pages/test.vue

<template><div>{
   {$t('Copy')}}{
   {copy}}{
   {c}}</div>
</template><script>
export default {asyncData ({i18n,app}) {console.log('asyncData')console.log(app.i18n.$t('Copy'))console.log('asyncData')},data () {return {copy: this.$t('Copy')}},computed: {c : function () {return this.$t('Copy')}},head () {return {title: this.$t('Copy'), // set a title}},beforeCreate () {// console.log(Object.keys(this))console.log('beforeCreat',this.$t('SOLD'))},created () {console.log('created',this.$t('SOLD'))},beforeMount () {console.log('beforeMount',this.$t('SOLD'))},mounted () {console.log('mounted',this.$t('Copy'))}
}
</script>
<style>
</style>

package.json

"vue-i18n": "^8.11.2",
"nuxt": "^2.0.0",