国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

基于Vue、vue-i18n實(shí)現(xiàn)國(guó)際化（多語(yǔ)言）

smallStone / 1408人閱讀

摘要：在中引入調(diào)用第三方插件新建一個(gè)對(duì)象默認(rèn)語(yǔ)言配置語(yǔ)言選項(xiàng)是一個(gè)配置語(yǔ)言包文件和語(yǔ)言選項(xiàng)的文件，文件內(nèi)容大致如下語(yǔ)言包列表合并語(yǔ)言包是一個(gè)函數(shù)，判斷當(dāng)前設(shè)置的語(yǔ)言類(lèi)型，如果沒(méi)有設(shè)置語(yǔ)言，則根據(jù)判斷是中文還是非中文，非中文則顯示英語(yǔ)。

vue-i18n官網(wǎng) https://kazupon.github.io/vue...

項(xiàng)目用vue-cli構(gòu)建，用到vue全家桶及webpack、iview。

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

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

2、新建一個(gè)vue-i18n對(duì)象

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

3、配置語(yǔ)言選項(xiàng)

LangCongig是一個(gè)配置語(yǔ)言包文件和語(yǔ)言選項(xiàng)的js文件，文件內(nèi)容大致如下：
// LangCongig.js
import IviewLangs from "./iviewLangs"

// 語(yǔ)言包列表, 合并語(yǔ)言包
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是一個(gè)函數(shù)，判斷當(dāng)前設(shè)置的語(yǔ)言類(lèi)型，如果沒(méi)有設(shè)置語(yǔ)言，則根據(jù)navigator判斷是中文還是非中文，非中文則顯示英語(yǔ)。
IviewLangs是iview的語(yǔ)言包配置，即我們定義的語(yǔ)言與iview顯示的要一致，比如時(shí)間選擇器的顯示。
// IviewLangs.js
import zhCN from "iview/dist/locale/zh-CN" // 簡(jiǎn)體中文
import enUS from "iview/dist/locale/en-US" // 英文

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

4、添加到new Vue選項(xiàng)里

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

5、如何調(diào)用

在頁(yè)面調(diào)用：{{$t("language")}}
在js中調(diào)用：this.$t("language")

6、切換語(yǔ)言

1）把語(yǔ)言保存起來(lái)，以便退出或刷新時(shí)加載后還是當(dāng)前選擇的語(yǔ)言，一般存在cookie里
2）this.$i18n.locale = "en" 重置語(yǔ)言類(lèi)型

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/100708.html

相關(guān)文章

  • 如何讓一個(gè)vue項(xiàng)目支持多語(yǔ)言（vue-i18n）

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

    wuyumin 評(píng)論0 收藏0

  • vue 國(guó)際化i18n 多語(yǔ)言切換

    摘要：如果對(duì)您有幫助請(qǐng)動(dòng)動(dòng)鼠標(biāo)右下方給我來(lái)個(gè)贊，您的支持是我最大的動(dòng)力。安裝 npm install vue-i18n 新建一個(gè)文件夾 i18n ，內(nèi)新建 en.js zh.js index.js 三個(gè)文件 準(zhǔn)備翻譯信息 en.js export default { home: { helloworld: hello workd ！ } }; zh.js export d...

    tuomao 評(píng)論0 收藏0

  • vue-i18n和elementUI實(shí)現(xiàn)國(guó)際化

    摘要：為了滿(mǎn)足很多公司都已經(jīng)向方向發(fā)展顧使用多語(yǔ)言的網(wǎng)站已經(jīng)太普遍了所以是使用和實(shí)現(xiàn)國(guó)際化接下來(lái)我會(huì)盡量寫(xiě)的詳細(xì)一點(diǎn)的內(nèi)容個(gè)人覺(jué)得的應(yīng)該寫(xiě)得清楚一些安裝所需要用到的東西安裝安裝創(chuàng)建目錄編寫(xiě)所需要用到的語(yǔ)言我只寫(xiě)了中文和英文歡迎來(lái)到我 為了滿(mǎn)足很多公司都已經(jīng)向international方向發(fā)展,顧使用多語(yǔ)言的網(wǎng)站已經(jīng)太普遍了, 所以是使用vue-i18n和elementUI實(shí)現(xiàn)國(guó)際化.接下來(lái)我...

    _ang 評(píng)論0 收藏0

  • vue-i18n結(jié)合Element-ui的配置

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

    孫淑建 評(píng)論0 收藏0

  • 記一次開(kāi)源學(xué)習(xí)--D2Admin 人人企業(yè)版

    摘要：前言上個(gè)月月底開(kāi)源組開(kāi)源了使用適配人人企業(yè)版專(zhuān)業(yè)版的前端工程具體詳情見(jiàn)人人企業(yè)版適配發(fā)布。當(dāng)然，也督促自己產(chǎn)出一篇相關(guān)的文章，來(lái)記錄這次有趣的學(xué)習(xí)之旅。 Created by huqi at 2019-5-5 13:01:14 Updated by huqi at 2019-5-20 15:57:37 前言 上個(gè)月月底@D2開(kāi)源組 開(kāi)源了使用 D2Admin 適配 人人企業(yè)版(專(zhuān)業(yè)版) 的...

    notebin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<