一.vue-i18n是什么？

一款針對Vue.js 的國際化插件。把網站的所有需要中英轉換的數據配置成中英文json文件，需要編寫大量中英文對照表，適合于少量的固定翻譯。

二.使用步驟

1.安裝vue-i18n

npm install vue-i18n

2.添加本地翻譯信息

本地翻譯信息有兩個，zh.js中文和en.js英文，這兩個js的內容是一一對照的。

在src文件夾下創建lang文件夾，并添加兩個zh.js和en.js文件。

en.js—英文 zh.js—中文 index.js----處理默認語言與導出i18n對象，方便在main.js中use

en.js代碼如下（示例）：

import enLocale from 'element-ui/lib/locale/lang/en'const en = {//全局配置add : 'add',welcome : 'welcome',//局部status : {disabled : 'disabled', //不可用abled : 'abled' //可用},//elementUI...enLocale } export default en;

zh.js代碼如下（示例）：

import zhLocale from 'element-ui/lib/locale/lang/zh-CN'const zh = {//全局配置add : '添加',welcome : '歡迎您',//局部status : {disabled : '不可用', //不可用abled : '可用' //可用},//elementUI...zhLocale } export default zh;

注意：

import zhLocale from 'element-ui/lib/locale/lang/zh-CN' import enLocale from 'element-ui/lib/locale/lang/en'

這是elementUI組件國際化。elementUI組件如何使用國際化中英文切換？

index.js代碼如下（示例）：

import Vue from 'vue' import VueI18n from 'vue-i18n' import en from './en.js' import zh from './zh.js' Vue.use(VueI18n) const messages = {en:en,zh:zh }export function getLanguage(){const chooseLanguage = window.localStorage.getItem("language");if(chooseLanguage)return chooseLanguage//如果沒有選擇語言，默認為zhconst language = (navigator.language || navigator.browserLanguage).toLowerCase();const locales = Object.keys(messages);for(const locale of locales){if(language.indexOf(locale) > -1){console.log("locale===",locale)return locale;}}return 'zh' } const i18n = new VueI18n({locale: getLanguage(),messages })export default i18n

4.將i18n對象掛載到Vue實例

main.js代碼如下（示例）：

import Vue from "vue"; import i18n from './lang/index' //lang/index.js暴露了i18n對象，所以這里引用Vue.use(ElementUI); new Vue({router,i18n,render: h => h(App) }).$mount("#app");

5.在html模板中使用

在你需要使用中英文切換的地方，語法格式{{$t(“XX”)}}

<div>{{$t("welcome")}}</div>

總結

以上是生活随笔為你收集整理的后台管理系统vue-i18n中英文切换功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。