[笔记]vue-cli i18n 多语系应用练习

参考文章: https://medium.com/easons-murmuring/%E5%9C%A8-vue-cli-%E4%B8%AD%E4%BD%BF%E7%94%A8-i18n-%E5%AF%A6%E4%BD%9C%E5%A4%9A%E5%9C%8B%E8%AA%9E%E7%B3%BB-720ec360783e

1.安装

npm install vue-i18n

2.专案根目录建立common资料夹

    common-config               -i18n                  -en.js                  -tw.js          -plugins              -vue-i18n.js

3.en.js为例

    // en.jsexport const locale = {  GENERAL: {    NAV_OPTIONS: ['Home', 'About', 'Contact'],    WELCOME_WORD: 'Welcome to your Vue.js application',    OK: 'ok',    CONTINUE: 'continue',    CANCEL: 'cancel',    GUEST: 'guest',  },}

4.vue-i18n.js

import Vue from 'vue'import VueI18n from 'vue-i18n'import { locale as en } from '../config/i18n/en'import { locale as tw } from '../config/i18n/tw'import { locale as jp } from '../config/i18n/jp'Vue.use(VueI18n)let messages = {}messages = { en, tw ,jp} // 这边把所有的翻译文档JS放进来export default new VueI18n({    locale: 'jp', // set locale (指定要读哪一份译文文档)    messages, // set locale messages})

5.在vue档中使用 {{$t('译文文档的栏位名称')}}

<template>  <div id="app">    <img src="./assets/logo.png">    <h1>{{ $t('GENERAL.WELCOME_WORD') }}</h1>    <router-view/>  </div></template>

6.也可以在script中调用 (App.vue)，设置语言，不需要再额外import

<script>export default {  name: 'App',  mounted(){    this.$i18n.locale = "en"  }}</script>

更正 :
必须先在 main.js中引入，才可以在其他的component中使用 this.$i18n.locale

// main.jsimport Vue from 'vue'import App from './App'import router from './router'import i18n from '../common/plugins/vue-i18n.js' // 这边引入Vue.config.productionTip = false/* eslint-disable no-new */new Vue({  el: '#app',  router,  i18n, // 这边也引入，跟router,vuex 使用方式是一样的  components: { App },  template: '<App/>'})

7.完成