1、i18n

1.1、i18n インストール

i18nこの言葉の略ですinternationalization. 最初の文字iと最後の文字を取りますn. 途中で18文字あるので, 合わせて表記しi18nますvue. Vue.js アプリケーションに

//使用yarn
yarn add vue-i18n 
//npm
npm i vue-i18n -S

2. i18n の使用

2.1、ファイル構造

ディレクトリの下にフォルダをsrc作成し、そのフォルダに言語設定 ( file ) を書き込み、モジュラー設定を担当します。i18njsonconfigindex.js

2.2、言語設定

src/i18n/config/en.json

{   
    "table": {//表格信息
        "date": "Date",
        "name": "Name",
        "address": "Address"
    },
    "language": {//语言切换时按钮跟着切换
        "Chinese": "Chinese",
        "English": "English"
    }
}

ソース/i18n/config/zh.json

{   
    "table": {//表格信息
        "date": "时间",
        "name": "姓名",
        "address": "地址"
    },
     "language": {//语言切换时按钮跟着切换
        "Chinese": "中文",
        "English": "英文"
    }
}

2.3. モジュール構成

src/i18n/index.js

import Vue from "vue"
import VueI18n from "vue-i18n"
Vue.use(VueI18n)//注入到所有的子组件

//require.context(path，deep，regExp)
//有3个方法 分别是keys() 


let langFileds = require.context('./config'， false， /\.js$/)

let regExp = /(.*\/)*([^.]+).*/ //正则用于匹配

// regExp.exec('./en.js')

let messages = {} //声明一个数据模型，对应i18n中的message属性

langFileds.keys().forEach(key => {
    let prop = regExp.exec(key)[1] //正则匹配文件名（en|zh这样的值）
    //messages[prop]相当于 messages['en'] = {table:{...}}
    messages[prop] = langFileds(key).default

})
console.log(messages);
console.log(langFileds('./en.js'));

let locale = localStorage.getItem('lang') || "zh" //从localstorag中获取，初始化语言

export default new VueI18n({
    locale，//指定语言字段
    messages,//定义语言字段
    silentTranslationWarn:true//去除警告
})

2.4. man.js にモジュール性を導入する

src/main.js

import Vue from 'vue'
import App from './App.vue'
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false

import i18n from "./i18n"

new Vue({
  render: h => h(App),
  i18n //挂载
}).$mount('#app')

2.5、i18n 構文

上記の手順に従って構成が完了すると、Vueさらに 2 つの属性があり$i18n、の属性は$t、$i18nモジュール方式で i18n を構成するときに公開する属性です。この属性の locale 属性を介して言語を切り替えることができます (すなわち:) this.$i18n.locale。代わりに$t、zh.json言語ファイル (例: ) からキー値で読み取ることができます。

<template>
    <div>
        <h1>{
   
   { $t('table.date') }}</h1>
        <select
           @change="handleChange()"
           v-model="language">
            <option value='Chinese'>{
   
   { $t('language.Chinese') }}</option>
            <option value='English'>{
   
   { $t('language.English') }}</option>
        </select>
    </div>
</template>

<script>
export default {
    name:'lang',
    data(){
        return {
            language:'Chinese'
        }
    },
    methods: {
        handleChange(){
            this.$i18n.locale = this.language
        }
    },
}
</script>

参考記事：Zhihu - vueでの国際化の使い方教えます

Vue で国際化を使用する方法を教えます