成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

smallStone / 1465人閱讀

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

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)語言
  locale: LangCongig.DEFAULT_LANG,
  messages: LangCongig.LOCALES
})

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

LangCongig是一個(gè)配置語言包文件和語言選項(xiàng)的js文件，文件內(nèi)容大致如下：
// 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是一個(gè)函數(shù)，判斷當(dāng)前設(shè)置的語言類型，如果沒有設(shè)置語言，則根據(jù)navigator判斷是中文還是非中文，非中文則顯示英語。
IviewLangs是iview的語言包配置，即我們定義的語言與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è)是我們自定義的中文語言包，格式如下：
// cn.js
module.exports = {
  language: "語 言",
  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)用

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

6、切換語言

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

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

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

相關(guān)文章

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

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

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

  • vue 國際化i18n 多語言切換

    摘要：如果對(duì)您有幫助請(qǐng)動(dòng)動(dòng)鼠標(biāo)右下方給我來個(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)國際化

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

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

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

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

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

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

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

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

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

0條評(píng)論

閱讀需要支付1元查看
<