quasar利用i18n实现国际化

手动配置

1. 安装依赖（vue-i18n）

npm install vue-i18n

2. 创建 src/boot/i18n.js 文件，内容如下

import Vue from 'vue'
import VueI18n from 'vue-i18n'

import messages from 'src/i18n'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'en-us',
  fallbackLocale: 'en-us',
  messages
})

export default ({ app }) => {
  // Set i18n instance on app
  app.i18n = i18n
}

// if you need to import it from
// other files, then:
export { i18n }

3. 创建 src/i18n/ 文件夹，里面存放项目所支持的每种语言的定义，示例目录如下

   • src
     • i18n
       • en-us
         • index.js
       • index.js

4. 在 quasar.config.js 文件中的 boot 小节中引用翻译文件

// quasar.conf.js
return {
  boot: [
    // ...
    'i18n'
  ],

  // ...
}

5. 在SFC中设置翻译块

要通过vue-i18n-loader在vue文件中使用嵌入式模板组件，必须确保使用所选的包管理器将@intlify/vue-i18n-loader和yaml-loader依赖项添加到项目中。然后在quasar.conf.js文件中更改webpack构建选项。在这种情况下，翻译以yaml格式存储在块中。

// quasar.conf.js
build: {
  // OR use the equivalent chainWebpack()
  // with its own chain statements (CLI v0.16.2+)
  extendWebpack (cfg) {
    cfg.module.rules.push({
      resourceQuery: /blockType=i18n/,
      type: 'javascript/auto',
      use: [
        { loader: '@kazupon/vue-i18n-loader' },
        { loader: 'yaml-loader' }
      ]
      // 或者下面这种写法也可以
      // loader: '@kazupon/vue-i18n-loader ! yaml-loader'
    })
    ...
  }
}

webpack 配置中允许指定多个 loader，可以在 import 语句或任何等效于 “import” 的方式中指定 loader。使用 ! 将资源中的 loader 分开。分开的每个部分都相对于当前目录解析。

import Styles from 'style-loader!css-loader?modules!./styles.css';

通过前置所有规则及使用 !，可以对应覆盖到配置中的任意 loader。

新增语言

例如现在需要添加一个新的语言——德语

1. 创建新文件，src/i18n/de/index.js然后在其中复制文件内容，src/i18n/en-us/index.js然后更改语言字符串。
2. 更改src/i18n/index.js并在其中添加新de语言。

import enUS from './en-us'
import de from './de'

export default {
  'en-us': enUS,
  de: de
}

创建语言切换器

<!-- some .vue file -->

<template>
  <!-- ...... -->
  <q-select
    v-model="lang"
    :options="langOptions"
    label="Quasar Language"
    dense
    borderless
    emit-value
    map-options
    options-dense
    style="min-width: 150px"
  />
  <!-- ...... -->
</template>

<script>
export default {
  data() {
    return {
      lang: this.$i18n.locale,
      langOptions: [
        { value: 'en-us', label: 'English' },
        { value: 'de', label: 'German' }
      ]
    }
  },
  watch: {
    lang(lang) {
      this.$i18n.locale = lang
    }
  }
}
</script>

使用

主要有三种情况

1. 在HTML正文中 (mykey1)
2. 在属性中 (mykey2)
3. 以编程的方式 (mykey3)

<template>
  <q-page>
    <q-btn :label="$t('mykey2')">
    // or
    // { label: this.$t('mykey2') }
    {{ $t('mykey1') }}
    <span v-html="content"></span>
  </q-page>
</template>

<script>
export default {
  data() {
    return {
      content: this.$t('mykey3')
    }
  }
}
</script>

其他配置

在配置完成后，虽然页面内部代码已经完成了语言的切换，但是需要进行页面的刷新才能够在页面中展示出来，手动刷新会导致页面仍保持默认语言，所以还需要进行下面的配置

src/boot/i18n.js

const i18n = new VueI18n({
    locale: localStorage.getItem('lang'),    // 如果这里是定值，那么刷新后还是回默认为这里的定值
    fallbackLocale: localStorage.getItem('lang'),
    messages,
});

src/store/user/mutations.js

// 语言切换器
export const SET_LANG = (state, data) => {
    state.lang = data;
    localStorage.setItem('lang', data);   // 将设置的默认语言存储在 localStorage 中
};

src/store/user/state.js

export default {
    // 获取当前 localStorage 中存储的 lang，如果没有则默认为 'en-us'
    lang: localStorage.getItem('lang') || 'en-us',
    requests: [],
};

语言切换设置页面

watch: {
    lang (lang) { 
        // 将默认语言更改为 lang
        this.$store.commit('user/SET_LANG', lang);
        // 刷新页面
        window.location.reload();
    }
}