使用 vue-i18n

安装 文档

npm install vue-i18n

import Vue from 'vue'import VueI18n from 'vue-i18n'​Vue.use(VueI18n)

/* eslint-disable no-unused-vars */
import Vue from 'vue'import VueI18n from 'vue-i18n'// noinspection ES6UnusedImports
import en from 'element-ui/lib/locale/lang/en'// noinspection ES6UnusedImports
import es from 'element-ui/lib/locale/lang/es'// noinspection ES6UnusedImports
import zh_CN from 'element-ui/lib/locale/lang/zh-CN'
​Vue.use(VueI18n)​function loadLocaleMessages() {    
    const locales = require.context('../locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)    
    const messages = {}    
    locales.keys().forEach(key => {        
        const matched = key.match(/([A-Za-z0-9-_]+)\./i)        
        if (matched && matched.length > 1) {            
            const locale = matched[1]            
            messages[locale] = locales(key)        
        }    
    })    
    return messages}​

export default new VueI18n({    
    locale: process.env.VUE_LANG_I18N_LOCALE || 'en',    
    fallbackLocale: process.env.VUE_LANG_I18N_FALLBACK_LOCALE || 'en',    
    messages: loadLocaleMessages(), 
    silentFallbackWarn: true
})

require.context(directory, useSubdirectories, regExp)

注解

require.context

require.context(directory, useSubdirectories, regExp)

1. directory: 要查找的文件路径

2. useSubdirectories: 是否查找子目录

3. regExp: 要匹配文件的正则

   require.context('./components/', true, /.js$/)

   const i18n = new VueI18n({ locale: 'zh-CN', // 语言标识 fallbackLocale: 'zh-CN',//没有英文的时候默认中文语言 silentFallbackWarn: true,//抑制警告 //this.$i18n.locale // 通过切换locale的值来实现语言切换 messages: { 'zh-CN': require('./common/lang/zh'), // 中文语言包 'en-US': require('./common/lang/en') // 英文语言包 } })

单文件组件使用 链接

npm i --save-dev @kazupon/vue-i18n-loader

npm install -D vue-loader vue-template-compiler

vue.config.js

module.exports = {    
    pluginOptions: {        
        i18n: {            
            locale: 'en',            
            fallbackLocale: 'en',            
            localeDir: 'locales',            
            enableInSFC: true        
        }    
    }
}

其他设置需要按照 vue-loader 和 webpack 的版本需要进行特别设置