vue項目國際化實現 vue-i18n使用詳細教程

1.安裝vue-i18n：

npm i vue-i18n -S

當然你也可以這樣：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

2.項目配置vue-i18n：

在src目錄下創建i18n文件夾，在i18n文件夾內添加基礎配置及各語言文本配置文件；

在index.js進行如下設置：

import Vue from 'vue';
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
// 引入各個語言配置文件
import zh from './config/zh';
import en from './config/en';
// 創建vue-i18n實例i18n
const i18n = new VueI18n({
    // 設置默認語言
    locale: localStorage.getItem('locale') || 'zh', // 語言標識
    // 添加多語言（每一個語言標示對應一個語言文件）
    messages: {
        zh,
        en,
    }
})
// 暴露i18n
export default i18n;

在各個語言配置文件中設置對應語言文案。注意：也就是說將頁面中所有的文字都做成相應的語言的文件

const zh = {
    name: '姓名',
    info: {
        age: '男'
    }
}
export default zh;

最后在外層main.js引入i18n，並掛載至vue實例：

import Vue from 'vue';
import App from './App.vue';
/**
 * 引入i18n國際化
 */
import i18n from './i18n/';
 
Vue.config.productionTio = false; 
 
new Vue({
  el: '#app',
  i18n,
  render: h => h(App)
});

3.項目使用：

通過$t()方法引用文案：

<p>{{$t("name")}}</p>
<p>{{$t("info.age")}}</p>
<span v-text="$t('index')"></span>

修改語言：

this.$i18n.locale = 語言編碼;

<template>
    <div id="test-ka">
        <h3>國際化翻譯</h3>
        <p>{{$t("name")}}</p>
        <p>{{$t("info.age")}}</p>
        <p>
            <el-button @click.native="changeType('zh')">切換中文</el-button>
            <el-button @click.native="changeType('en')">切換英文</el-button>
        </p>
    </div>
</template>
<script>
import {mapMutations} from 'vuex';
export default {
    date() {
        return {}
    },
    methods:{
        changeType(type){
            // 此處做了語言選擇記錄
            localStorage.setItem('locale',type)
            // 修改顯示語言
            this.$i18n.locale = type;
        }
    }
}
</script>