vue-i18n-國際化

安裝

npm install vue-i18n --save-dev

新建 i18n 文件夾

i18n >
    language >  // 不同的語言翻譯
        en-US.js           // 英文
        zh-CN.js           // 中文
    translate.js  //  翻譯主體文件

translate.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import enUS from './language/en-US'
import zhCN from './language/zh-CN'
import store from '../store/index'


Vue.use(VueI18n)


let language = window.localStorage.getItem('language'); // 從localStorage獲取語言種類
if (!language) { // 如果沒有值 把默認(rèn)值設(shè)為中文
    language = 'zh-CN'
    window.localStorage.setItem('language', language) // 把語言種類存到localStorage
}
store.commit('setLanguage', language) // 把語言種類存到vuex
window.console.log(language)
const i18n = new VueI18n({
    locale: store.state.language, // 從vuex中獲取語言種類
    messages: {
      'en-US': enUS,
      'zh-CN': zhCN
    },
    silentTranslationWarn: true
})
// window.console.log(i18n.locale)
// window.$i18n = i18n
export { i18n }

en-US.js

const t = {
    main: {
        open: 'open',
        close: 'close',
        sendEmail: 'Send Email'
    }
}
export default t

zh-CN.js

const t = {
    main: {
        open: '打開',
        close: '關(guān)閉',
        sendEmail: '發(fā)送郵箱'
    }
}
export default t

main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store/index'
import router from './route/index'
import axios from 'axios'
import ViewUI from 'view-design'
import {i18n} from './i18n/translate'
import 'view-design/dist/styles/iview.css';
import '@/assets/css/md.css'
import './assets/css/reset.css'
import 'vant/lib/index.css';
import vant from 'vant';
Vue.use(vant);
// import Echarts from 'echarts'

Vue.use(ViewUI);
Vue.config.productionTip = false
// Vue.use(Echarts)
axios.defaults.baseURL = 'http://49.235.157.87:9220/'
Vue.prototype.axios = axios

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

vuex

import Vue from 'vue'
import Vuex from 'vuex'
import other from './moduls/other'
Vue.use(Vuex)

const state = {
    isLogin: false,
    language: 'zh-CN'
}
const getters = {
    isLogin: state => state.isLogin, // isLogin = function (state) { retrun state.isLogin }
    language: state => state.language
}
const mutations = {
    setIsLogin(state, payload){
        state.isLogin = payload
    },
    setLanguage(state, payload){
        state.language = payload
    }
}
const actions = {
    setIsLogin(state, payload){
        state.commit('setIsLogin', payload)
    },
    setLanguage(state, payload){
        state.commit('setLanguage', payload)
    }
}
const modules = {
    other
}

const store = new Vuex.Store({
    state, getters, mutations, actions, modules
})


export default store

home.vue

<template>
    <div class="headerBody">
        <Select v-model="model2" size="small" style="width:100px" @on-change='change'>
            <Option v-for="item in language" :value="item.value" :key="item.value">{{ item.label }}             </Option>
        </Select>
        <input type = 'text' :placeholder="$t('.main.open')"></input>
        {{$t('main.open')}}
    </div>
</template>

<script>
export default {
    data () {
        return {
            model2: window.localStorage.getItem('language'),
            language: [
                {
                    value: 'zh-CN',
                    label: '中文'
                },
                {
                    value: 'en-US',
                    label: '英文'
                }
            ]
        }
    },
    created(){
  
    },
   
    methods:{
        
            change (val) {
                this.$i18n.locale = val
                this.$store.commit('setLanguage', val)
            }
        }
    }
}
</script>

<style lang='less'>
</style>