基于Vue、vue-i18n實現國際化（多語言）

smallStone 發布于2019-08-23 14:30 / 1415人閱讀

摘要：在中引入調用第三方插件新建一個對象默認語言配置語言選項是一個配置語言包文件和語言選項的文件，文件內容大致如下語言包列表合并語言包是一個函數，判斷當前設置的語言類型，如果沒有設置語言，則根據判斷是中文還是非中文，非中文則顯示英語。

vue-i18n官網 https://kazupon.github.io/vue...

項目用vue-cli構建，用到vue全家桶及webpack、iview。

1、在main.js中引入vue-i18n.

import VueI18n from "vue-i18n"
vue調用第三方插件
Vue.use(VueI18n)

2、新建一個vue-i18n對象

const i18n = new VueI18n({
  // 默認語言
  locale: LangCongig.DEFAULT_LANG,
  messages: LangCongig.LOCALES
})

3、配置語言選項

LangCongig是一個配置語言包文件和語言選項的js文件，文件內容大致如下：
// LangCongig.js
import IviewLangs from "./iviewLangs"

// 語言包列表, 合并語言包
const locales = {
  "cn": Object.assign(require("../lang/cn"), IviewLangs.zh_CN),
  "en": Object.assign(require("../lang/en"), IviewLangs.en_US)
}
export default {
  DEFAULT_LANG: setup(),
  LOCALES: locales
}
setup是一個函數，判斷當前設置的語言類型，如果沒有設置語言，則根據navigator判斷是中文還是非中文，非中文則顯示英語。
IviewLangs是iview的語言包配置，即我們定義的語言與iview顯示的要一致，比如時間選擇器的顯示。
// IviewLangs.js
import zhCN from "iview/dist/locale/zh-CN" // 簡體中文
import enUS from "iview/dist/locale/en-US" // 英文

export default {
  zh_CN: zhCN,
  en_US: enUS
}
require("../lang/cn")這個是我們自定義的中文語言包，格式如下：
// cn.js
module.exports = {
  language: "語 言",
  chinese: "中文"
}
// en.js
module.exports = {
  language: "language",
  chinese: "Chinese"
}

4、添加到new Vue選項里

let vm = new Vue({
  el: "#app",
  i18n,
  render: h => h(App)
})

5、如何調用

在頁面調用：{{$t("language")}}
在js中調用：this.$t("language")

6、切換語言

1）把語言保存起來，以便退出或刷新時加載后還是當前選擇的語言，一般存在cookie里
2）this.$i18n.locale = "en" 重置語言類型

GPU云服務器云服務器 vue-i18n php多語言實現方法多語言多語言對應

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/100708.html

如何讓一個vue項目支持多語言（vue-i18n）

摘要：引入是一個插件，主要作用就是讓項目支持國際化多語言。所以新建一個文件夾，存放所有跟多語言相關的代碼。目前包含三個文件。全局搜索發現一共有多個。這兩天手頭的一個任務是給一個五六年的老項目添加多語言。這個項目龐大且復雜，早期是用jQuery實現的，兩年前引入Vue并逐漸用組件替換了之前的Mustache風格模板。要添加多語言，不可避免存在很多文本替換的工作，這么龐雜的一個項目，怎么才能使...

wuyumin 2019-08-22 17:31 評論0 收藏0
vue 國際化i18n 多語言切換

摘要：如果對您有幫助請動動鼠標右下方給我來個贊，您的支持是我最大的動力。安裝 npm install vue-i18n 新建一個文件夾 i18n ，內新建 en.js zh.js index.js 三個文件準備翻譯信息 en.js export default { home: { helloworld: hello workd ！ } }; zh.js export d...

tuomao 2019-04-23 13:19 評論0 收藏0
vue-i18n和elementUI實現國際化

摘要：為了滿足很多公司都已經向方向發展顧使用多語言的網站已經太普遍了所以是使用和實現國際化接下來我會盡量寫的詳細一點的內容個人覺得的應該寫得清楚一些安裝所需要用到的東西安裝安裝創建目錄編寫所需要用到的語言我只寫了中文和英文歡迎來到我為了滿足很多公司都已經向international方向發展,顧使用多語言的網站已經太普遍了, 所以是使用vue-i18n和elementUI實現國際化.接下來我...

_ang 2019-08-22 18:14 評論0 收藏0
vue-i18n結合Element-ui的配置

摘要：官網已經做了詳細介紹，這里依葫蘆畫瓢跟著實現一下為了實現插件的多語言切換按照如上把國際化文件都整合到一起，避免中大段引入相關代碼。使用方法：在配合 Element-UI 一起使用時，會有2個問題： ####（1）、頁面刷新后，通過按鈕切換的語言還原成了最初的語言，無法保存 ####（2）、框架內部自帶的提示文字無法更改，比如像時間選擇框內部中的提示文字關于第一個問題，可以在初始化...

孫淑建 2019-08-26 13:51 評論0 收藏0
記一次開源學習--D2Admin 人人企業版

摘要：前言上個月月底開源組開源了使用適配人人企業版專業版的前端工程具體詳情見人人企業版適配發布。當然，也督促自己產出一篇相關的文章，來記錄這次有趣的學習之旅。 Created by huqi at 2019-5-5 13:01:14 Updated by huqi at 2019-5-20 15:57:37 前言上個月月底@D2開源組開源了使用 D2Admin 適配人人企業版(專業版) 的...

notebin 2019-05-21 19:46 評論0 收藏0