在NUXT中更改区域设置时更改样式表

npm install vue-i18n

// nuxt.config.js
module.exports = {
  // ...
  plugins: [
    { src: '~/plugins/i18n.js' }
  ],
  // ...
}

// plugins/i18n.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

export default ({ app }) => {
  app.i18n = new VueI18n({
    locale: 'en', // 默认语言
    fallbackLocale: 'en', // 如果当前语言不存在，则使用默认语言
    messages: {
      en: require('~/locales/en.json'), // 英文语言包
      zh: require('~/locales/zh.json') // 中文语言包
    }
  })
}

// locales/en.json
{
  "styles": {
    "color": "blue",
    "fontSize": "16px"
  }
}

// locales/zh.json
{
  "styles": {
    "color": "red",
    "fontSize": "14px"
  }
}

<template>
  <div :style="styles">{{ $t('styles.color') }}</div>
</template>

<script>
export default {
  computed: {
    styles() {
      return {
        color: this.$t('styles.color'),
        fontSize: this.$t('styles.fontSize')
      }
    }
  }
}
</script>